Smooth Scroll to Div using jQuery

Smooth scrolling using jQuery gives a better user interface to the web project. Smooth scroll reduces efforts of the users to scroll for reach the certain portion of the page. With smooth scrolling, the user can reach the specific portion of the page by clicking an anchor link or button.

jQuery scrollTop method provides an easy way to scroll to div element. You can also add animation on page scroll using jQuery animate() method. In this tutorial, we will show you how to implement a smooth scroll to div using jQuery without manually scroll.

Scroll to Div

The Scroll to Div functionality is very useful for single page website. It helps the user go to the specific page section without manually page scroll. The example code scroll to div and jump to the specific portion of the page by click on the anchor link using jQuery.

The following jQuery scroll to div script land you to the specific portion of the page by clicking on the respective link.

HTML Code:
Specify the element ID with hash (#) prefix in the href attribute value of the anchor tag.

<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 Smooth scrolling functionality uses jQuery. So, include the jQuery library first.

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

The following code automatically scrolls the page to specific div using jQuery.

<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 scroll automatically to specific div by class/id on page load using jQuery.

jQuery Code:
Specify the ID or class (.bottom-content) of the HTML element where you want to scroll the page on load.

<script>
$(function() {
    var target = $('.bottom-content');
    if (target.length) {
        $('html,body').animate({
            scrollTop: target.offset().top
        }, 1000);
        return false;
    }
});
</script>

Social Popup on Page Scroll using jQuery and CSS

Conclusion

Hope, this short and simple script help you to add smooth scrolling feature in the website. It helps to implement scroll to an element within a minute. You can easily enhance this Auto Scroll to Div functionality as per your needs. To make the scroll to div feature more user-friendly, add BackToTop button using jQuery on the web page.