2

Preciso fazer com que o usuário ao clicar na div com a classe panel-heading (h2), role o scroll da tela até o link sitebusca.html/. Como posso criar esse código?

HTML:

<div class="panel panel-default pulse animated">
  <span class="side-tab" data-target="#tab1" data-toggle="tab" role="tab"
  aria-expanded="false">
    <div class="panel-heading" role="tab" id="headingOne" data-toggle="collapse"
    data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      <div class="text-pan animated bounce">
        <i class="glyphicon glyphicon-map-marker gly-circle">
        </i>
      </br>
      <h2 id="title-cat">
        Título Collapse
      </h2>
    </div>
  </div>
</span>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingOne">
  <div id="panel-mob" style="margin-bottom: 50px;">
    <div class="thumbnail">
      <img data-src="holder.js/100%x200" alt="100%x200" src="imagens/background/bg-mob-one.jpg">
      <div class="caption-mob panel-body">
        <h3 class="caption-title-mob animated fadeInDown">
          TESTE NOVO SITE
        </h3>
        <p class="caption-text-mob animated fadeInDown">
          Sub descrição
        </p>
        <center>
          <a href="sitebusca.html/" class="btn btn-success btn-lg btn-config btn-mob animated fadeInLeft">
            acessar »
          </a>
        </center>
      </div>
    </div>
  </div>
</div>
</div>

2 Respostas 2

1

Use âncoras. Por exemplo:

<style>
#panel-heading{
  height: 300px;
  width: 600px;
  background-color: grey;
  padding: 20px;
}
</style>
<a href="#panel-heading">descer página<a><br><br><br><br><br><br><br><br><br><br>
<div id="panel-heading">Conteúdo</div>

Ou

<script type="text/javascript">
    function rolar(objID) {
        this.location = "#" + objID;
    }
</script>


    <div onclick="rolar('panel-heading');"></div><br><br><br><br><br><br><br><br><br><br>

    <div id="panel-heading">Conteúdo</div>
3
  • Carlos, eu já fiz esse teste. Mas não dá para usar a tag "href", pq estou trabalhando com uma div. Eu preciso que a pessoa clique na div que contém a classe panel-heading, e a página desça até o botão com aquele link. Sacou? Commented 7/04/2015 às 3:38
  • Olha uma solução com Javascript, editei. Mas o que vai ter dentro dessa div ? Se for só texto/imagem dava pra fazer usando link.
    – Carlos
    Commented 7/04/2015 às 3:47
  • Carlos, consegui inserir. Porém, o efeito está muito duro. Como posso aplicar um efeito jquery. Como por exemplo: easeInOutExpo ? Commented 7/04/2015 às 4:22
1

Acho que seria melhor fazer uma solução puramente com JavaScript, assim evita sujar o html com funções dentro de elementos. Mude as classes/ids pro que preferir:

$('.click-scroll').click(function () {
    $('html, body').animate({
        scrollTop: $("#alvo").offset().top
        }, 2000); // Tempo em ms que a animação irá durar
});
1
  • Mas e se o botão clicado for um link ? como fazer com que a página não seja recarregada ? Commented 30/07/2017 às 12:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .