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.

Jake Bresnehan

A Front End Developer based in Sydney and the creator of Web Design Weekly.

Web Design Weekly keeps developers at the forefront of techniques and trends whilst helping them learn and grow to produce top quality code to make the web a better place for all.

9 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

This post currently has 9 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 day month ye@r *