Scroll to element in vanilla JavaScript Vanilla JS
Scrolling the user down to a specific part of the page can be useful, for example if you have a single page site or want a user to be able to click a link to scroll to an element. Here is how to make a link scroll to an element with vanilla JavaScript.
We'll create the HTML for an anchor a link and a target element to scroll to.
<a href="#" id="scroll-to-element">Scroll to element link</a>
/* element to scroll to */
<div id="target-element">
<p>target element :)</p>
</div>
Firstly, you can make a link scroll to an element just with HTML by setting an anchor a element's href attribute to the same value as an element's id attribute, but that method scrolls instantly instead of smoothly and also adds a # followed by the id to the url of your page e.g. example.com#target-element. If you want to send people a link to take them to that scroll position when they land on the page, then the HTML href method works great for that, but if you want to animate a scroll to a specific part of the page after a user clicks something on your page, you'll want to continue reading and use JavaScript.
Since we're using JavaScript, we don't need to put an id in the href attribute of our anchor a link to scroll to an element, we can just leave it as # and prevent the # from being added to the url with preventDefault() in JavaScript.
We do need id attributes on the link and target element so we can easily select them with JavaScript. The ids can be anything but for this example I've chosen "scroll-to-element" for the link since we only have one link and "target-element" for the element to scroll to since we only have one target element.
The simplest way to scroll to an element in JavaScript is to scroll instantly without animating the scroll. We'll animate the scroll later, but if you don't want the animation then this is how to make an anchor link scroll to an element when clicked without animating in vanilla JavaScript.
targetElement = document.querySelector("#target-element");
scrollLink.addEventListener("click", function(e) {
e.preventDefault();
window.scroll(0, targetElement.offsetTop);
});
Here we are storing the link and target elements in variables, then adding a click event listener to the link which sets the x-axis scroll to 0 and y-axis scroll to the offsetTop of the target element. The offsetTop gives us the distance in pixels an element is from the closest positioned ancestor element or the body element if there is no positioned ancestor.
Now we'll animate the scroll so the user's page scrolls smoothly rather than instantly. This is how to make an anchor link smooth scroll to an element in vanilla JavaScript when clicked.
targetElement = document.querySelector("#target-element");
scrollLink.addEventListener("click", function(e) {
e.preventDefault();
window.scroll({ top: targetElement.offsetTop, left: 0, behavior: 'smooth' });
});
This smooth scrolling works in Chrome, Firefox & Opera natively.
Use a polyfill for other browsers: http://iamdustan.com/smoothscroll/. When other browsers implement the scroll behavior specification natively, you'll be able to simply remove the polyfill. You can download the production ready file for smooth scrolling to include in your code or for other installations, see the smooth scroll polyfill repo on github.
Learn more about window.scroll() on MDN
Learn more about offsetTop on MDN
If you want to make a link scroll to the top of the page when clicked, read Scroll to top in vanilla JavaScript.
Thanks for reading.
Ryan
Published on 27 Jul 2022