When clicking on the site menu, move the scroll bar to a specific point slowly [duplicate]

Question

When clicking on the site menu, move the scroll bar to a specific point slowly [duplicate]

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

I would like to move the scroll bar to a specific point on the page by clicking the menu of the site.

I could do with anchors.

jQuery(document).ready(function($) { 
     $(".scroll").click(function(event){        
         event.preventDefault();
     $('html,body').animate({scrollTop:$(this.hash).offset().top}, 600);
  });
}); 

 <a href="#footer" class="scroll">Descer</a>

I'm trying to click on the menu, but I have not been able to do it yet.

html jquery

asked by anonymous 20.07.2016 / 21:08

2 answers

When you load (enter) a page automatically move the scroll bar to a specific element without clicking anything ASP.Net and C # - automatic email sending

score 3 · Answer 1

Hello, mate.

The plugin suggested by our partner Naldson should work perfectly, however, it is also possible to do without installing this plugin, only with JS and jQuery. Check out:

$("html, body").animate({
                   scrollTop: /*Distância em relação ao topo (int, em pixels)*/
              }, /*Duração da animação (int, em milisegundos)*/);

So, for example:

$("html, body").animate({
                   scrollTop: 1300
              }, 200);

If you want to scroll, for example, to a specific element, you can use the .offset (). top method of this element to get its distance from the top (be sure to subtract the height of your top case it is position: fixed). Example:

$("html, body").animate({
                   scrollTop: $("#id_do_bendito").offset().top
              }, 200);


//Com topo position:fixed, considerando que o topo é #topo

topoHt = $("#topo").height();

$("html, body").animate({
                   scrollTop: $("#id_do_bendito").offset().top-topoHt 
              }, 200);

score 2 · Answer 2

Do you know the Animate Scroll ? It does exactly what you want.

With it you could do it like this:

Index.html

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="animatescroll.js">
    </head>
    <body>
        <nav id="menu">
           <ul>
              <button onclick='$('.elemento').animatescroll({scrollSpeed:2000,easing:'easeInOutBack'});'>Ir até o elemento</li>
           </ul>
        </nav>

        <div class="elemento">
        </div>
    </body>
</html>