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


jQuery is a popular JavaScript library that simplifies the process of manipulating HTML documents, handling events, and creating animations. In this article, we'll see how to scroll the page up or down using the anchor elements in jQuery.

We sometimes encounter large content pages on websites and to go to a specific section, we want to perform the scrolling in the page up or down. To solve this problem, there are several ways to achieve this, but using anchor elements is one of the easiest and most straightforward methods. Apart from this, we’ll see the scrollTop and animate to perform this task.

Approach 1: Using Anchor Element

In this approach, we will be using anchor element to scroll the page up or down. An anchor element is an HTML tag that creates a link to another location within the same page or to a different page. It is identified by the 'a' tag and the href attribute is used to specify the URL of the target location. When a user clicks on an anchor link, the browser scrolls the page to the target location.

Steps to Scroll the Page Using the Anchor Element

Step 1: Create the Anchor Links First

<a href="#para2">Go to Para 2</a>

Step 2: Adding id to div Element

<div id="para2">
   <p>This is section 2.</p>
</div>

Step 3: jQuery Code to Scroll the Page When the Links are Clicked

$(document).ready(function() {
   $('a[href^="#"]').on('click', function(event) {
      var target = $(this.getAttribute('href'));
      if (target.length) {
         event.preventDefault();
         $('html, body').stop().animate({
            scrollTop: target.offset().top
         }, 1000);
      }
   });
});

Example

<!DOCTYPE html>
<html>
<head>
   <title>Scrolling with Anchor Elements in jQuery</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
      $(document).ready(function() {
         $('a[href^="#"]').on('click', function(event) {
            var target = $($(this).attr('href'));
            if (target.length) {
               event.preventDefault();
               $('html, body').stop().animate({
                  scrollTop: target.offset().top
               }, 500);
            }
         });
      });
   </script>
   <style>
      body {
         height: 1500px;
      }
      h1 {
         margin-top: 50px;
      }
      a {
         display: block;
         margin-bottom: 10px;
      }
   </style>
</head>
<body>
   <a href="#para1">Go to Para 1</a>
   <a href="#para2">Go to Para 2</a>
   <a href="#para3">Go to Para 3</a>
   <h1 id="para1">Section 1</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales quam id malesuada finibus. Vestibulum et leo eu nibh feugiat blandit. Suspendisse sollicitudin ipsum vel lacus pretium, a auctor libero feugiat. Proin eleifend commodo ante, sed consectetur ipsum gravida non.</p>
   <h1 id="para2">Section 2</h1>
   <p>Phasellus vel commodo sapien, id tristique nibh. Duis mattis metus at orci commodo aliquam. Pellentesque imperdiet, ex non eleifend consequat, purus dolor consequat risus, in interdum nunc lectus eu augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
   <h1 id="para3">Section 3</h1>
   <p>Nam commodo felis ut massa posuere, eu bibendum ex vehicula. Nam pellentesque sem et turpis interdum, vitae consequat mauris imperdiet. Nulla eu pretium purus. Morbi sodales, lorem ut euismod dapibus, quam nisl aliquam enim, vel sodales mauris purus sit amet leo.</p>
</body>
</html>

Output

Approach 2: Using ScrollTop and Animate

Another approach to scroll the page up or down using jQuery involves using the built-in jQuery methods 'scrollTop' and 'animate'. See the below steps to implement it −

Steps to scroll the Page Using ScrollTop and Animate

Step 1: Selecting Element to Scroll

First, we'll need to select the element that we want to scroll to. For example, let's say we want to scroll to a div with the id "myDiv". We can select this element using the jQuery selector as follows −

var target = $('#myDiv');

Step 2: Using scrollTop Method

Next, we can use the 'scrollTop' method to get the current vertical scroll position of the window. This method returns the number of pixels that the document is currently scrolled from the top. We'll store this value in a variable called 'scrollPosition' −

var scrollPosition = $(window).scrollTop();

Step 3: Using scrollPosition

Now that we have the target element and the current scroll position, we can calculate the distance that needs to be scrolled. We'll subtract the target element's offset from the top of the document from the current scroll position to get the distance that needs to be scrolled −

var scrollDistance = target.offset().top - scrollPosition;

Step 4: Adding Animate Method

Finally, we can use the 'animate' method to smoothly scroll the page to the target element. We'll pass in an object with the 'scrollTop' property set to the desired scroll distance, along with a duration in milliseconds for the animation −

$('html, body').animate({
   scrollTop: scrollDistance
}, 1000);

Step 5: jQuery Code

$(document).ready(function() {
   $('a[href^="#"]').on('click', function(event) {
      var target = $($(this).attr('href'));
      if (target.length) {
         event.preventDefault();
         var scrollPosition = $(window).scrollTop();
         var scrollDistance = target.offset().top - scrollPosition;
         $('html, body').animate({
            scrollTop: scrollDistance
         }, 1000);
      }
   });
});

Example

<!DOCTYPE html>
<html>
<head>
   <title>Scrolling with Anchor Elements in jQuery</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
      $(document).ready(function() {
         $('a[href^="#"]').on('click', function(event) {
            var target = $($(this).attr('href'));
            if (target.length) {
               event.preventDefault();
               var scrollPosition = $(window).scrollTop();
               var scrollDistance = target.offset().top - scrollPosition;
               $('html, body').animate({
                  scrollTop: scrollDistance
               }, 800);
            }
         });
      });
   </script>
   <style>
      body {
         height: 1500px;
      }
      h1 {
         margin-top: 50px;
      }
      a {
         display: block;
         margin-bottom: 10px;
      }
   </style>
</head>
<body>
   <a href="#para1">Go to Para 1</a>
   <a href="#para2">Go to Para 2</a>
   <a href="#para3">Go to Para 3</a>
   <h1 id="para1">Para 1</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales quam id malesuada finibus. Vestibulum et leo eu nibh feugiat blandit. Suspendisse sollicitudin ipsum vel lacus pretium, a auctor libero feugiat. Proin eleifend commodo ante, sed consectetur ipsum gravida non.</p>
   <h1 id="para2">Para 2</h1>
   <p>Phasellus vel commodo sapien, id tristique nibh. Duis mattis metus at orci commodo aliquam. Pellentesque imperdiet, ex non eleifend consequat, purus dolor consequat risus, in interdum nunc lectus eu augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
   <h1 id="para3">Para 3</h1>
   <p>Nam commodo felis ut massa posuere, eu bibendum ex vehicula. Nam pellentesque sem et turpis interdum, vitae consequat mauris imperdiet. Nulla eu pretium purus. Morbi sodales, lorem ut euismod dapibus, quam nisl aliquam enim, vel sodales mauris purus sit amet leo.</p>
</body>
</html>

Output

Conclusion

Scrolling to a specific section of a web page is an essential feature to enhance user experience. jQuery offers a simple and straightforward approach to implement this functionality using anchor elements. Using anchor elements creates links to other locations on the same page and can easily be identified by the 'a' tag and 'href' attribute. By following the simple steps outlined in this article, web developers can easily implement scrolling to specific sections using jQuery. Additionally, the 'scrollTop' and 'animate' built-in jQuery methods can be used to achieve the same functionality. Regardless of the approach, the end result is a seamless and intuitive navigation experience for users.

Updated on: 10-May-2023

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements