Smooth scroll is a pretty slick way of scrolling from one element to another element on the same page. If you are developing a one-page website, adding this special effect can greatly improve user experience. There are many jQuery plugins available to add this effect, but we will not use any of them. In this short tutorial, we will learn couple of ways to add smooth scrolling with only jQuery.

Scroll to a specific element

Here is how you can scroll to any element on the page using simple jQuery:

$('html, body').animate({
     scrollTop: $('#element').offset().top
}, 1000);

Above will scroll the page down to #element over a period of 1000 milliseconds or one second.

Scroll to the selected anchor

You can deep dive further and enable smooth scrolling for all anchors on your page. One such example of this is animating scrolling for Bootstrap 4 navbar menu. The following jQuery code snippet waits for clicks on any link that points to an anchor and has smooth-scroll class. When any such link is clicked, the code smoothly scrolls down to the anchor.

$('a.scoll-scroll').on('click', function (event) {
    var $anchor = $(this);
    
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1000);
			
    event.preventDefault(); //prevent default click behavior
});

Following is a Bootstrap 4 HTML code for navbar that uses above code snippet to smoothly scroll to different page sections.

<nav class="navbar navbar-expand-md navbar-light bg-white fixed-top">
	....
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item">
                <a class="nav-link smooth-scroll" href="#about">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link smooth-scroll" href="#services">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link smooth-scroll" href="#process">Process</a>
            </li>
            <li class="nav-item">
                <a class="nav-link smooth-scroll" href="#contact">Contact</a>
            </li>
        </ul>
    </div>
</nav>

See smooth scrolling in action here:

Smooth Scroll Example

Conclusion

It's pretty straight-forward to use smooth scrolling effect using jQuery. You do not need a plugin. If you need a HTML template with this effect, all our premium Bootstrap 4 templates come with smooth scrolling feature for better user experience. Upgrade now to get unlimited access to all our premium products and use them for as many personal and commercial projects as you want.