{"id":5232,"date":"2021-07-30T02:00:00","date_gmt":"2021-07-30T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/jquery-smooth-scroll\/"},"modified":"2024-07-25T20:03:43","modified_gmt":"2024-07-25T18:03:43","slug":"jquery-smooth-scroll","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/jquery-smooth-scroll\/","title":{"rendered":"Create jQuery smooth scrolling [3 ways]"},"content":{"rendered":"\n

Here we’ll explain how to use jQuery to create smooth scrolling<\/strong> when navigating to a specific element on the page. jQuery makes scrolling<\/strong> effects much easier and on top of that, you make sure it works in all browsers no matter how old they are. So, if you are already using jQuery, why not take advantage of it?<\/p>\n\n\n

Smooth scrolling to anchor on click<\/h2>\n\n\n

We will make use of the animate<\/code> function of jQuery<\/a> to trigger the scroll when clicking on a specific element: [CodePen here]<\/a>.<\/p>\n\n\n\n

All we need to doo is pass the elements we want the function to scroll and the scroll distance to the destination element:<\/p>\n\n\n

$(document<\/span>).on(\"ready\"<\/span>, function<\/span>(<\/span>) <\/span>{\n\n    function<\/span> scrollToAnchor<\/span>(aid<\/span>)<\/span>{\n        const<\/span> destination = $(\"a[name='\"<\/span>+ aid +\"']\"<\/span>);\n        $('html,body'<\/span>).animate({\n            scrollTop<\/span>: destination.offset().top\n        },'slow'<\/span>);\n    }\n\n    $(document<\/span>).on('click'<\/span>, '.smooth-link'<\/span>, function<\/span>(<\/span>)<\/span>{\n        scrollToAnchor('demo'<\/span>);\n    });\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Note that the destination element will have to contain a name<\/code> property. For example:<\/p>\n\n\n
<a<\/span> name<\/span>=\"demo\"<\/span>><\/span><\/a<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
You can also use the id<\/code> if you prefer, but you’ll also need to replace $(\"a[name='\"+ aid +\"']\");<\/code> for $('#' + aid);<\/code>).<\/p>\n\n\n\n
Let’s go with the explanation:<\/p>\n\n\n\n
Let’s say you want to be able to click on a button or a link or any element on your page and smoothly scroll to it. First, we’ll need to attach the click event to it:<\/p>\n\n\n
$(document<\/span>).on('click'<\/span>, '.smooth-link'<\/span>, function<\/span>(<\/span>)<\/span>{\n  \/\/ Do something on click<\/span>\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Now, let’s create a function that allows us to scroll to an element with a specific selector:<\/p>\n\n\n
function<\/span> scrollToAnchor<\/span>(selector<\/span>)<\/span>{\n    const<\/span> destination = $(\"a[name='\"<\/span>+ selector +\"']\"<\/span>);\n    $('html,body'<\/span>).animate({\n      scrollTop<\/span>: destination.offset().top\n    },'slow'<\/span>);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
scrollTop<\/code> expects to receive the number of pixels that we want the page to scroll. So all we have to do is get the destination element on our destination<\/code> constant and then just get its position on the page by using .offset().top<\/code>. (See more about the offset function of jQuery<\/a>.)<\/p>\n\n\n\n
And putting it all together we have the resulting code you can see above.<\/p>\n\n\n
Smooth scrolling on page load<\/h2>\n\n\n
Sometimes you might want to link a page with an anchor on the URL, for example, let’s say I want to direct my visitors to the comments section of another article, then I can use something like example.com\/#comments<\/code> and expect them to land directly on the comments section of the page.<\/p>\n\n\n\n
Now, you might want visitors to get a context of where they are on the page they just landed, and here’s where smooth scrolling comes in handy.  It allows visitors to see where exactly they are on the page as they’ll see the page scrolling down before they land on the specific section of the page.<\/p>\n\n\n\n
Here’s the code you’ll need to land on a page and scroll smoothly to the anchor on page load: [CodePen here]<\/a><\/p>\n\n\n
$(window<\/span>).on(\"load\"<\/span>, function<\/span>(<\/span>) <\/span>{\n    var<\/span> anchor = window<\/span>.location.hash.replace('#'<\/span>, ''<\/span>);\n    scrollToAnchor(anchor);\n});\n\nfunction<\/span> scrollToAnchor<\/span>(selector<\/span>)<\/span>{\n  const<\/span> destination = $(\"a[name='\"<\/span>+ selector +\"']\"<\/span>);\n    $('html,body'<\/span>).animate({\n      scrollTop<\/span>: destination.offset().top\n    },'slow'<\/span>);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The code looks quite similar to the previous scenario but in this case, we are waiting for all elements on the page to load before calling our scrollToAnchor<\/code> function. This is especially important if you have images that take some time to load, as normally the height of those images is not determined until they completely load. So, images that are yet to load can appear with a height of 0 and only get their final height once the image completely loads.<\/p>\n\n\n\n
So, to fix that, we add this:<\/p>\n\n\n
$(window<\/span>).on(\"load\"<\/span>, function<\/span>(<\/span>) <\/span>{\n    \/\/ All images are now loaded<\/span>\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Then we get the URL anchor with window.location.hash<\/code> and use it instead in our call to the scrollToAnchor<\/code> function. That should return #comments<\/code> for our example. But we just need the word comments<\/code> which is the value our destination element will have. (<a name=\"comments\"><\/a><\/code>). So let’s just remove the #<\/code> part too using replace<\/code>:<\/p>\n\n\n
scrollToAnchor(window<\/span>.location.hash.replace('#'<\/span>, ''<\/span>));\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Now we add the same scrollToAnchor<\/code> we applied on our previous example and that’s it!<\/p>\n\n\n
Smooth scrolling inside a scrollable element<\/h2>\n\n\n
Let’s say you want to be able to scroll inside an element that has a scrollbar and uses overflow: scroll<\/code>. How can we do this?<\/p>\n\n\n\n
Easy, we just change the element we want to apply the animation to:<\/p>\n\n\n
    \/\/ Our element now has id #destination<\/span>\n    $('#destination'<\/span>).animate({\n      scrollTop<\/span>: destination.offset().top\n    }, 8000<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Here’s an example:<\/p>\n\n\n\n
The magic here, as you guessed, is the use of the animate<\/code> function of jQuery<\/a> as well as the property scrollTop<\/code>. This is the beauty of jQuery making our life easier.<\/p>\n\n\n\n