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.


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

Feel free to explore the demo or download the code.

Demo | Download

Want to become a better web developer?

Join over 25,000 other developer & designers who get awesome links to the best news and articles each week delivered directly to their inbox.


  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
      scrollTop: (document.body.clientHeight * i)

  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?


    • 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 = $;
    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.


  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.


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

  10. Works perfectly with boostrap 3.

  11. Hello!
    Great script thanks.
    How can I make it works with a sort of Waypoint:
    When #my-element is 75% visible Booom —> Scroll to position.
    Do you have a clue?

    Best regards,

  12. Dude! I just wasted 2 hours trying to figure out how to do this before coming across this post! THANKS!!!!!!

    • No worries Taneal!

      It has happened to me many times as well 🙂

  13. Thank you, man !
    That’s the kind of code I love: short, coincise and very easy to implement !

  14. Hi Jack great and helpful tutorial. I am using this , I think this is also simple
    $(document).ready(function(e) {
    var a = 400,
    t = 1200,
    l = 700,
    s = e(“.scrool-top”);
    e(window).scroll(function() {
    e(this).scrollTop() > a ? s.addClass(“scrool-is-visible”) : s.removeClass(“scrool-is-visible scrool-fade-out”), e(this).scrollTop() > t && s.addClass(“scrool-fade-out”)
    }), s.on(“click”, function(a) {
    a.preventDefault(), e(“body,html”).animate({
    scrollTop: 0
    }, l)

  15. Thank you very much for saving my time. i try to do it by self but it doesn’t works correctly because my function wrong focus section

This post currently has 21 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 *