Scroll to Element Using JavaScript

Product Support
, ,
#1

How can I scroll to an element using JavaScript? I’m attempting to navigate to a

element on the page. However, the following code didn’t work for me:

document.getElementById(“divFirst”).style.visibility = ‘visible’; document.getElementById(“divFirst”).style.display = ‘block’;

How to use Javascript scroll to element ?

#2

Well, a straightforward way to achieve this would be using the scrollIntoView() method. It’s simple and built right into JavaScript. You can apply it directly on the element you want to scroll to. If you want a smooth scrolling effect, there’s even an option for that. Here’s how you can do it:

function scrollToElement() {
    var element = document.getElementById("divFirst");
    element.scrollIntoView({ behavior: 'smooth' });
}

This method gives you an easy way to control the scrolling behavior with just one function. The keyword here is ‘smooth’ if you’re after a more seamless user experience.

#3

Yes, that’s a great start! But if you want more control over the exact position, you can use window.scrollTo() combined with the element’s offset. This way, you calculate the element’s position relative to the top of the document. It’s a bit more manual, but it can be useful if you want finer control.

function scrollToElement() {
    var element = document.getElementById("divFirst");
    var elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
    window.scrollTo({ top: elementPosition, behavior: 'smooth' });
}

This allows you to handle the scrolling yourself while still keeping it smooth, and it’s especially useful for complex layouts or when you need to scroll based on a precise element position.

#4

Both approaches are excellent for vanilla JavaScript. But, if you happen to be working with jQuery, you can take advantage of its animation capabilities for smooth scrolling. With just a few lines of jQuery, you can achieve the same effect in a more compact way:

function scrollToElement() {
    $('html, body').animate({
        scrollTop: $("#divFirst").offset().top
    }, 1000); // Duration in milliseconds
}

This method is helpful if you’re already using jQuery in your project. It handles both the animation and the offset calculation, and you can adjust the scroll speed by modifying the duration (1000 ms in this case). It’s a handy option for adding a polished, animated scroll experience.