Scroll to position with jQuery

If you need to scroll to a specific location on the page this little custom jQuery function can help you out. This snippet will help you scroll to a particular section based on the element you choose.

Add this little snippet inside your scripts file.


$.fn.scrollView = function () {
  return this.each(function () {
    $('html, body').animate({
      scrollTop: $(this).offset().top
    }, 1000);
  });
}

Add this (also in your scripts file) and modify it to be the element which you would like to scroll to.


 $('#your-element').scrollView();

This snippet calculates #your-elements‘s position and scrolls your browser window to it. The duration is set at 1 second.

You could use the above snippet it many ways. A very simple example would be to trigger the function inside a click event.


$('#your-link').click(function (event) {
  event.preventDefault();
  $('#your-div').scrollView();
});

Feel free to explore the demo or download the code.

Demo | Download

14 Comments

  1. It would be nice if there was a demo of this to see how it works.

    • Hey Dan!

      Thanks for the idea!

      Here is a demo.

      If you are not familiar with GitHub, just download it via the ‘zip cloud icon’ and have a play around. When I get time I will try and clean it up.

      Hope that helps.

  2. Thanks man it works for me excellent :)

  3. excellent script it helps me a lot thanks :)

  4. its a great one !! thanks a lot !! but i guess am facing a problem , that it didn’t work while am using chrome ( it worked correctly in the DEMO ) and it worked correctly when i used IE

    • I found that Chrome and safari have a problem in changing the attributes of the body and html tag. so i modified it by the following code.

      function goToByScroll(i) {
      // Scroll
      $('#scrollcontainer').animate({
      scrollTop: (document.body.clientHeight * i)
      },
      1500);
      }

  5. Hi,

    Is there an existing way to modify your script to allow for an offset position that takes into account a fixed horizontal navigation bar for example?

    Best,

    • I don’t have an answer for you, however I am looking for the same as you. I want to be able to smoothly scroll to any DOM object position. Example, imagine I have a grid of 40*40 images, on a very wide page (so, with horizontal scrollbar)… I want to create a function that would allow the page to smoothly move from my current position to the center of that specified DOM object. Any idea anybody? I can even pay for having that. I am developping a 2D game and I am looking forward to implement this functionnality for extra quality and feel.

  6. Excelente! Funciona muy bien! Gracias

  7. I used this as
    var $current = $(‘section.current’);
    $next = $current.next();
    $(‘html,body’).animate({
    scrollTop: $next.offset().top},’slow’);
    but did’t work on firefox 29 (on chrome it was fine). Any help would be appreciated.

    • Hey Nipuna,

      I just tested the post snippet in firefox 29 and all worked perfectly.
      I hope you managed to fix your code.

      Cheers,
      Jake

  8. Given Script code is understandable but which is not working at themes.Can u Explain why its happening.

    • Hi Chaitanya,

      If you can elaborate a little more on your problem I might be able to help.

      Cheers,
      Jake

  9. I needed to wrap the first function after equal sign with parenthesis. Now works like a charm. Thanks!

This post currently has 14 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *

Current ye@r *