Long before there was a trend of hashtags in url which were used to scroll to an particular div or any other element on web page, but with evolution of jQuery concept of smooth scrolling came into the light and it became so popular day-by-day that many of websites are using it enormously.

Smooth scrolling gives a very well user experience and also reduces efforts of user to scroll up to a certain area of page, rather thatn doing this user can just click on a link or any element on page and we will take care to land the user to that area. 🙂

Now we will see and build an demo parallel to work on smooth scrolling.

First build the HTML as follows

<!DOCTYPE html>
<html>

    <head>
        <title>Scroll Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="text/javascript" src="./jquery.js"></script>
        <script type="text/javascript" src="./script.js"></script>
    </head>

    <body>

        <div class="main-wrap">

            <h1>This is scroll demo</h1>

                <div id="con1">
                    <h3>Container 1</h3>
                    <img src="./img/img1.jpg" alt="image 1" />
                </div>
                <div id="con2">
                    <h3>Container 2</h3>
                    <img src="./img/img2.jpg" alt="image 2" />
                </div>
                <div id="con3">
                    <h3>Container 3</h3>
                    <img src="./img/img3.jpg" alt="image 3" />
                </div>
                <div id="con4">
                    <h3>Container 4</h3>
                    <img src="./img/img4.jpeg" alt="image 4" />
                </div>
                <div id="con5">
                    <h3>Container 5</h3>
                    <img src="./img/img5.jpeg" alt="image 5" />
                </div>
                <div id="con6">
                    <h3>Container 6</h3>
                    <img src="./img/img6.jpg" alt="image 6" />
                </div>
                <div id="con7">
                    <h3>Container 7</h3>
                    <img src="./img/img7.jpg" alt="image 7" />
                </div>
                <div id="con8">
                    <h3>Container 8</h3>
                    <img src="./img/img8.jpg" alt="image 8" />
                </div>
                <div id="con9">
                    <h3>Container 9</h3>
                    <img src="./img/img9.jpg" alt="image 9" />
                </div>
            <div class="nav">

                <ul id="navlist">
                                              <li><a href="#con1">Container 1</a></li>
                                             <li><a href="#con2">Container 2</a></li>
                                             <li><a href="#con3">Container 3</a></li>
                                             <li><a href="#con4">Container 4</a></li>
                                             <li><a href="#con5">Container 5</a></li>
                                             <li><a href="#con6">Container 6</a></li>
                                             <li><a href="#con7">Container 7</a></li>
                                             <li><a href="#con8">Container 8</a></li>
                                             <li><a href="#con9">Container 9</a></li>
                                    </ul>

            </div>

        </div>

    </body>
</html>

observe that we are building multiple divs like con1, con2, con3….etc under a main div main-wrap.

Now just add a little flavor of style using style.css file.


.main-wrap { width: 960px; border: 1px solid #CCC; margin: 0 auto }
    img { max-width: 100%; }

.nav { background: #DDD; position: fixed; right: 10px; top: 10px; }
    #navlist, #navlist li { list-style: none; margin: 0; padding: 0 }
    #navlist li { margin: 20px }
    #navlist li a { padding: 20px }

Now here comes the jquery script which is doing all the magic in smooth scrolling.

    jQuery('a[href^="#"]').click(function(e) {

        jQuery('html,body').animate({ scrollTop: jQuery(this.hash).offset().top}, 1000);

        return false;

        e.preventDefault();

    });

In above code it is checking for all the anchors having hashtags as href, in href attribute of the anchor tag there is ID of certain elements which is present on the webpage.

It is using jQuery animate function to smoothly scroll using the scrollTop property of the animate function. One important point to note about animate function is that it will only work where there are numeric calculations such as top-left positions, scrollTop etc.; it won’t work for things such as hiding or showing or backgrounds etc.

After getting ID of that element, we are getting offset for that element, offset() will return elements current top and left positions according to document.

jQuery(‘html,body’).animate({ scrollTop: jQuery(this.hash).offset().top}, 1000);

In this line we are asking the browser to scroll based on elements current offset position from top of the document in 1sec ( 1000 milliseconds )

In this way it is very easy to develop a smooth scroll a webpage.

jQuery smooth scrolling to an element on page

17 thoughts on “jQuery smooth scrolling to an element on page

  • December 26, 2013 at 2:24 pm
    Permalink

    Hi, i have reading out and i will definitely bookmarrk your site, just wanted to say i liked this article.

    Reply
    • January 5, 2014 at 10:07 am
      Permalink

      Thank you very much Bruno 🙂

      Reply
    • January 24, 2014 at 1:50 pm
      Permalink

      Thank you Rakesh 🙂

      Reply
  • August 1, 2014 at 8:39 am
    Permalink

    Thank you very much, i got what i was searching from 2 days.

    Reply
    • August 1, 2014 at 6:47 pm
      Permalink

      I am happy to hear this Sarvesh 🙂

      Reply
  • January 22, 2015 at 6:22 am
    Permalink

    Great Tutorial.. Keep it up Bro 🙂

    Reply
  • April 27, 2015 at 5:42 am
    Permalink

    It gives error jQuery(…).offset(…) is null. Please help me.

    Reply
  • May 30, 2015 at 7:38 am
    Permalink

    Thanks for your effort to make this tutorial, well i’m doing project about click navbar and scroll it, well i try to make by yours and yes it totally working but why there is no slow motion in my page, please kindly respond as soon as possible to my email if you can cause your commment doesnt give any warning to all users comment, Thanks a lot

    Freddy

    Reply
  • May 30, 2015 at 7:41 am
    Permalink

    Silly me, Thanks alot my bro i do stupid things,,


    <script type="text/javascript" src="asset/js/scripts.js">


    <script type="text/javascript" src="asset/js/script.js">

    Thanks

    Freddy Sidauruk

    Reply
  • June 1, 2015 at 12:32 pm
    Permalink

    Hello Admin, now i face the problem, when i click and page scroll why my page is not good, i mean my page in scroll more top so my page is not good looking at, how can i make scroll working well as your tutorial, cause i have modif with pargrahp images, etc, will big thanks for respond

    sidaurukfreddy@gmail.com

    Reply
  • November 17, 2015 at 3:00 pm
    Permalink

    really very nice thank

    Reply
  • August 8, 2016 at 7:44 am
    Permalink

    Hi 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)
    })
    })

    Reply

Leave a Reply

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