Smooth scrolling with jQuery gives the web project a better user interface. Smooth scrolling reduces users ' effort to scroll to reach the page's specific portion. By clicking an anchor connection or key, the user will enter the specific portion of the page with smooth scrolling.

The jQuery scrollTop method provides an easy way for the div component to scroll. You can also use the jQuery animate() method to apply animation to the page scroll. In this tutorial, we'll show you how to use jQuery without manually scrolling to implement a smooth scroll to div.

Scroll to Div

The feature of Scroll to Div is very useful for one-page website. This allows the user to go to the segment of the specific page without scrolling the page manually. By clicking on the anchor connection using jQuery, the example code scrolls to div and hops to the specific portion of the page.

By clicking on the respective reference, the following jQuery scroll to div script will land you to the specific portion of the page.

HTML Code:

Specify the hash (#) prefixed item ID in the anchor tag's href attribute name.

<div id="top">

    <a href="#section1">Go Section 1</a>

    <a href="#section2">Go Section 2</a>

</div>

<div id="section1">

    <!-- Content goes here -->

</div>

<div id="section2">

    <a href="#top">BackToTop</a>

    <!-- Content goes here -->

</div>

JavaScript Code:

The feature of smooth scrolling uses jQuery. So, first include the library jQuery.

<script>src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Using jQuery, the following code scrolls the page to specific div automatically.

<script>

$(function() {

    $('a[href*=\\#]:not([href=\\#])').on('click', function() {

        var target = $(this.hash);

        target = target.length ? target : $('[name=' + this.hash.substr(1) +']');

        if (target.length) {

            $('html,body').animate({

                scrollTop: target.offset().top

            }, 1000);

            return false;

        }

    });

});

</script>

Auto Scroll to Div

The following code snippet helps to automatically scroll through jQuery on page load to unique div by class / id.

jQuery Code:

Specify the HTML element ID or class (.bottom-content) where you want the page to be loaded.

<script>

$(function() {

    var target = $('.bottom-content');

    if (target.length) {

        $('html,body').animate({

            scrollTop: target.offset().top

        }, 1000);

        return false;

    }

});

</script>