Smooth Scroll to Div using jQuery

Smooth scrolling using jQuery gives a better user interface to the web project. Smooth scroll reduces the users’ efforts to scroll to reach a certain portion of the page. With smooth scrolling, the user can reach a 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 scrolling.

Scroll to Div

The Scroll to Div functionality is very useful for single-page websites. It helps the user go to the specific page section without scrolling the page manually. In this example scroll to div code snippet, the user can jump to the specific portion of the page by clicking on the anchor link using jQuery.

The following jQuery scroll to div script lands 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">
    <a href="#top">BackToTop</a>
    <!-- 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.7.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 helps you to add smooth scrolling feature to 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.