Skip to content
Related Articles
Open in App
Not now

Related Articles

How to scroll the page up or down using anchor element in jQuery ?

Improve Article
Save Article
  • Last Updated : 24 Apr, 2020
Improve Article
Save Article

The problem is to include a slide effect whenever we click a local anchor and we want to scroll up or down the page accordingly. Earlier we can do it natively by using CSS property.


a {
  scroll-behavior: smooth;

Now with the help of jQuery, we can do it by using the following two methods:

  • jQuery.offset() method: This method allows us to retrieve the current position of any element relative to the document. This method is particularly useful when we want to perform drag and drop operations or when we want to position the new element on top of another existing element.
  • jQuery.animate() method: This method allows to create animations on any numeric CSS property. CSS object is required in order to use the method. We can use this to animate both style and non-style properties.


<!DOCTYPE html>
        How to scroll the page up or down
        using anchor element in jQuery ?
    <script src=
        $(document).ready(function () {
            // Add smooth scrolling to all links
            $("a").on('click', function (event) {
                // Make sure this.hash has a value
                // before overriding default behavior
                if (this.hash !== "") {
                    // Prevent default anchor
                    // click behavior
                    // Store hash
                    var hash = this.hash;
                    // Using jQuery's animate() method 
                    // to add smooth page scroll
                    // The optional number (800) specifies
                    // the number of milliseconds it takes
                    // to scroll to the specified area
                    $('html, body').animate({
                        scrollTop: $(hash).offset().top
                    }, 500, function () {
                        // Add hash (#) to URL when done 
                        // scrolling (default click behavior)
                        window.location.hash = hash;
                } // End if
        html, .primary {
            height: 150%;
        section {
            min-height: 150%;
        <a href="#section1">
            Click Me to Smooth Scroll
            to Section 1 Below
        <a href="#section2">
            Click Me to Smooth Scroll
            to Section 2 Below
        <a href="#section3">
            Click Me to Smooth Scroll
            to Section 3 Below
    <div class="primary">
    <div class="primary" id="section1">
        <section style="background-color:cyan"></section>
    <div class="primary" id="section2">
        <section style="background-color:yellow"></section>
    <div class="primary" id="section3">
        <section style="background-color:red"></section>


  • Before scrolling effect on Section 1:
    Before Scrolling Effect
  • After scrolling effect on Section 1 we go to Cyan Colored Box as in Code:
    After Scroll Effect

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!