Scroll scroll to button

Navigation
2

I need to make the user click on div with class panel-heading ( h2 ), scroll the screen to the sitebusca.html/ link. How can I create this code?

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>
    
asked by anonymous 07.04.2015 / 05:21

2 answers

1

Use anchors. For example: 

<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>

Or 

<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>
    
07.04.2015 / 05:31
1

I think it would be better to make a solution purely with JavaScript, thus avoid messing up html with functions inside elements. Change the pro classes / ids you prefer: 

$('.click-scroll').click(function () {
    $('html, body').animate({
        scrollTop: $("#alvo").offset().top
        }, 2000); // Tempo em ms que a animação irá durar
});
    
07.04.2015 / 12:12
PHP authentication OAuth2 Google Maps API and Google Indoor Maps