By clicking the site menu, move the scroll bar to a specific point slowly

Asked

Viewed 4,175 times

1

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

I managed to 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 do by clicking on the menu but I haven’t been able to so far.

jquery html

  • I do not see this question as duplicate identified, since it refers to clicking on the site menu, and not to a link outside the menu.

  • I don’t see how the location of the link would make a difference. If you want to ask "how do I automatically go to an anchor when loading the page", it’s another problem (but that’s completely different from your current question).

  • quiet, sorry then for asking wrong. Next time I will pay more attention on how to ask correctly so that there is no problem.

  • I’m not complaining, you don’t have to apologize. I’m just pointing out things you can improve on to get answers that are relevant to your problem. Remembering that if this is the case, you can [Dit] your post to add all the information that is relevant to the problem. The idea is that the easier it gets for the community to understand the exact problem, the greater the chance you get what you want, and at the same time the staff doesn’t waste time answering something that’s not what you expect.

  • PS: the way you repeated the question, got better and has come up with a better answer, I think. The idea is this, you better take advantage of the site, and the community can spend more time helping you objectively. Even when I made the first comment, I hadn’t even seen that one yet.

  • Yes, I’m learning programming and I really like this site because it has an answer for almost everything. I will learn to ask also correctly with time.

Show 1 more comment

2 answers

3

Hey, buddy.

The plugin suggested by our companion Naldson should work perfectly, however, it is also possible to do without the installation of 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)*/);

Then I would be:

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

If you want to scroll, for example, to a specific element, you can use the . offset() method. top of that element to pick up its distance from the top (don’t forget to subtract the height of your top if 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);

  • worked perfectly, but on the same page. My specific case is that I come from another page after clicking on the menu of the previous page.

  • If I got it right.... it’s pretty quiet to do, put the scrolling function within: $(window). load(Function(){/here/}); that it will roll at the time that load this new page.

  • Best answer!

2

Knows the Animate Scroll? He does exactly what you want.

With him you could do so:

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>

  • I’ll see. Thanks.

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.