How to Scroll to Element in JavaScript?

Best practices

Use `element.scrollIntoView({ behavior: 'smooth' })` for a smooth, animated scroll that enhances user experience.
Always check for the existence of the element (`if (element)`) before attempting to scroll to avoid JavaScript errors.
When dealing with fixed headers, adjust the scroll position using `window.scrollBy()` to account for the header's height, ensuring the target element is fully visible.
Opt for `window.scrollTo()` with `element.offsetTop` for precise control when scrolling to an element, especially useful in single-page applications where dynamic content might change scroll positions.

// Select element by ID
var elementById = document.getElementById('target-element-id');
// Scroll to element with smooth behavior
elementById.scrollIntoView({ behavior: 'smooth' });

// Select element using query selector
var elementByQuery = document.querySelector('.target-class');
// Scroll to element instantly
elementByQuery.scrollIntoView({ behavior: 'instant' });

// Using window.scrollTo with element's offsetTop
var elementOffset = document.querySelector('#another-target-id');
// Scroll to specific position
window.scrollTo({
top: elementOffset.offsetTop,
behavior: 'smooth'
});

// Scroll by specific values - useful for fixed headers
var fixedHeaderOffset = 100; // height of fixed header
window.scrollBy({
top: elementById.getBoundingClientRect().top - fixedHeaderOffset,
behavior: 'smooth'
});

Common issues

Ensure that the element's visibility style is not set to `hidden` or `display: none` as it prevents `scrollIntoView` from working.
Verify that the parent containers of the element do not have `overflow: hidden` or `overflow: scroll` styles that might restrict scrolling behavior.
Use `element.getBoundingClientRect().top` along with `window.innerHeight` to check if an element is already visible before scrolling, which can improve performance.
Consider debouncing scroll events if tied to user actions like clicking or dragging to prevent excessive computations and enhance smoothness in user interactions.

// Inorrect: Trying to scroll to an element that is hidden
document.getElementById('hidden-element').scrollIntoView();

// Correct: Check if element is visible before scrolling
var elem = document.getElementById('visible-element');
if (elem.style.display !== 'none' && elem.style.visibility !== 'hidden') {
elem.scrollIntoView({ behavior: 'smooth' });
}

// Inorrect: Ignoring parent container's overflow property
document.querySelector('.child-of-overflow-hidden').scrollIntoView();

// Correct: Ensure no parent has overflow that prevents scrolling
var childElement = document.querySelector('.child-element');
var parent = childElement.parentElement;
while (parent) {
if (getComputedStyle(parent).overflow === 'hidden') {
console.error('Cannot scroll: Parent container has overflow set to hidden.');
break;
}
parent = parent.parentElement;
}
if (!parent) {
childElement.scrollIntoView({ behavior: 'smooth' });
}

// Inorrect: Scrolling without checking if element is already in view
document.getElementById('may-be-visible').scrollIntoView({ behavior: 'smooth' });

// Correct: Scroll only if element is out of view
var element = document.getElementById('check-visibility');
var rect = element.getBoundingClientRect();
if (rect.top < 0 || rect.bottom > window.innerHeight) {
element.scrollIntoView({ behavior: 'smooth' });
}

// Inorrect: Scrolling on every user action without throttling
window.addEventListener('resize', () => {
document.getElementById('responsive-element').scrollIntoView();
});

// Correct: Debounce the scroll event to avoid performance issues
let timeout;
window.addEventListener('resize', () => {
clearTimeout(timeout);
timeout = setTimeout(() => {
document.getElementById('responsive-element').scrollIntoView({ behavior: 'smooth' });
}, 300);
});