How to set smooth scroll after clicking the link using JavaScript ?
Last Updated :
12 Jul, 2025
Smooth scroll provides a seamless user experience as it provides an effective way to enhance website navigation. By implementing smooth scroll functionality, one can ensure that users transition fluidly between different sections of your webpage when they click on internal links.
There are several methods to implement smooth scroll after clicking the link using JavaScript which are as follows:
The scrollIntoView() method scrolls the user's view to the element it is called on. It includes several options to modify the scroll behavior, one of which is the behavior property. By default, this property makes the scroll jump instantly to its destination. Setting the behavior value to smooth changes this to a smooth scrolling effect.
It first extract the hash portion of the anchor link using the hash property, then select the corresponding element with the querySelector() method. Finally, call the scrollIntoView() method on the selected element with behavior set to smooth to smoothly scroll the page to this location.
Example: To demonstrate smooth scroll after clicking the link using the scrollIntoView() method in JavaScript.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to set smooth scrolling after
clicking an anchor link using
JavaScript?
</title>
<style>
.scroll {
height: 1000px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to set smooth scrolling after
clicking an anchor link using
JavaScript?
</b>
<p id="dest">
Click on the button below to
scroll to the top of the page.
</p>
<p class="scroll">
GeeksforGeeks is a computer science
portal. This is a large scrollable
area.
</p>
<a href="#dest">
Scroll to top
</a>
<script>
// Define selector for selecting
// anchor links with the hash
let anchorSelector = 'a[href^="#"]';
// Collect all such anchor links
let anchorList =
document.querySelectorAll(anchorSelector);
// Iterate through each of the links
anchorList.forEach(link => {
link.onclick = function (e) {
// Prevent scrolling if the
// hash value is blank
e.preventDefault();
// Get the destination to scroll to
// using the hash property
let destination =
document.querySelector(this.hash);
// Scroll to the destination using
// scrollIntoView method
destination.scrollIntoView({
behavior: 'smooth'
});
}
});
</script>
</body>
</html>
Output:
The scrollTop() method in jQuery is used to scroll to a specific section of the page. By animating this method with built-in animations, you can achieve a smoother scrolling effect. First, the hash portion of the anchor link is extracted using the hash property, and its position on the page is determined using the offset() method.
The scrollTop() method is then called with this hash value to scroll to the desired location. To animate the scroll, wrap the scrollTop() method in the animate() method and specify the duration of the animation in milliseconds.
A larger value will make the animation slower, while a smaller value will speed it up. This approach ensures that all anchor links on the page will smoothly animate when clicked.
Example: To demonstrate smooth scroll using JQuery scrollTop() method.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to set smooth scrolling after
clicking an anchor link using
JavaScript?
</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<style>
.scroll {
height: 1000px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to set smooth scrolling after
clicking an anchor link using
JavaScript?
</b>
<p id="dest">
Click on the button below to
scroll to the top of the page.
</p>
<p class="scroll">
GeeksforGeeks is a computer science
portal. This is a large scrollable
area.
</p>
<a href="#dest">
Scroll to top
</a>
<script>
// Define selector for selecting
// anchor links with the hash
let anchorSelector = 'a[href^="#"]';
$(anchorSelector)
.on('click', function (e) {
// Prevent scrolling if the
// hash value is blank
e.preventDefault();
// Get the destination to scroll to
// using the hash property
let destination = $(this.hash);
// Get the position of the destination
// using the coordinates returned by
// offset() method
let scrollPosition
= destination.offset().top;
// Specify animation duration
let animationDuration = 500;
$('html, body').animate({
scrollTop: scrollPosition
}, animationDuration);
});
</script>
</body>
</html>
Output:
Similar Reads
How to Open a Link Without Clicking on it using JavaScript? To open a link without clicking on it we can use the onmouseover method of JavaScript. The link will open when the mouse moves over the text. It returns a newly created window, or NULL if the call gets failed. Syntax:window.open( URL, name, Specs )Note: Allow Pop-up of Web Browser. Example 1: URL is
1 min read
How to Open a Link Without Clicking on it using JavaScript? To open a link without clicking on it we can use the onmouseover method of JavaScript. The link will open when the mouse moves over the text. It returns a newly created window, or NULL if the call gets failed. Syntax:window.open( URL, name, Specs )Note: Allow Pop-up of Web Browser. Example 1: URL is
1 min read
How to Get and Set Scroll Position of an Element using JavaScript ? In this article, we will learn how to get and set the scroll position of an HTML element using JavaScript.Approach: We will be using the HTML DOM querySelector() and addEventListener() methods and the HTML DOM innerHTML, scrollTop and scrollLeft properties.We create an HTML div element with an id of
3 min read
How to slide down the page after video ends using JavaScript ? Given a web page, the task is to initiate the slider only after the video ends with JavaScript.SyntaxIn HTML:<video onended="myScript">In JavaScript:1. Using custom function:video.onended=function(){myScript};2. Using the addEventListener() method:video.addEventListener("ended", myScript);Algo
4 min read
How to Disable Scrolling Temporarily using JavaScript? Disabling scrolling temporarily using JavaScript means preventing users from scrolling a webpage during specific interactions, such as when a modal is open or a loading screen is displayed. Scrolling can be disabled using JavaScript using 2 methods:Table of ContentUsing window.onscroll functionSetti
2 min read
How to Disable Scrolling Temporarily using JavaScript? Disabling scrolling temporarily using JavaScript means preventing users from scrolling a webpage during specific interactions, such as when a modal is open or a loading screen is displayed. Scrolling can be disabled using JavaScript using 2 methods:Table of ContentUsing window.onscroll functionSetti
2 min read