How to make Smooth Scrolling using jQuery

How to make Smooth Scrolling using jQuery - ASTechnolabs
How to make Smooth Scrolling using jQuery – ASTechnolabs

Here’s the code to perform a smooth page scroll to an anchor on the same page using jQuery. So that you can Smooth Scrolling your page using jQuery.

Step 1 :

insert jQuery Library (if not exist in your project)

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

Step 2 :

insert below jQuery code

<script>
// Select all links with hashes with .smooth class
$('a.smooth[href*="#"]')
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function(event) {
        if (
            location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
            location.hostname == this.hostname
        ) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                event.preventDefault();
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 1000);
            }
        }
    });
</script>

Step 3 :

give class “.smooth” to your Link.

Done. Now you can Try with yourself and if any issues there then you can comment us anytime. We’ll always here to help. Here is also link of Demo Code for your tutorial.


People also search for this as below keywords :

How to make smooth scrolling in jquery

How to make smooth scrolling using jquery

Tags:

Add a Comment

Your email address will not be published. Required fields are marked *