JAVASCRIPT
Smoothly Scroll an Element Into the Visible Viewport
Learn to programmatically scroll any DOM element into the user's visible viewport with a smooth animation, improving user experience for navigation or highlighting content.
function scrollIntoViewSmoothly(elementId, behavior = 'smooth', block = 'start') {
const element = document.getElementById(elementId);
if (!element) {
console.error(`Element with ID '${elementId}' not found.`);
return;
}
element.scrollIntoView({ behavior: behavior, block: block });
}
// Example Usage:
// Assume an HTML structure with a button and a target section far down:
// <button onclick="scrollIntoViewSmoothly('targetSection')">Go to Target</button>
// <div style="height: 1000px;"></div> // Spacer
// <section id="targetSection">This is the target section!</section>
//
// You can customize behavior ('auto', 'smooth') and block ('start', 'center', 'end', 'nearest')
// scrollIntoViewSmoothly('anotherSection', 'auto', 'center');
How it works: This snippet shows how to programmatically scroll a specific DOM element into the user's visible viewport. Using `element.scrollIntoView()` with options for `behavior` (like 'smooth' for animation) and `block` (to define vertical alignment), it provides a great way to guide users to specific content or improve navigation within long pages.