JAVASCRIPT
Smoothly Scroll to a Specific Element with JavaScript
Implement smooth scrolling to any target element on the page using JavaScript's scrollIntoView method for enhanced user navigation and experience.
function smoothScrollToElement(elementId) {
const targetElement = document.getElementById(elementId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth',
block: 'start' // 'start', 'center', 'end', or 'nearest'
});
console.log(`Successfully scrolled to element: ${elementId}`);
} else {
console.error(`Element with ID '${elementId}' not found for scrolling.`);
}
}
// Example Usage:
// Assume you have an HTML element far down the page: <section id="targetSection">...</section>
// And a button to trigger scroll: <button onclick="smoothScrollToElement('targetSection')">Go to Target</button>
// You can also call it directly:
smoothScrollToElement('targetSection');
How it works: This code provides a function to smoothly scroll the viewport to a specific HTML element identified by its ID. It uses the `scrollIntoView()` method, a powerful built-in browser API. By setting `behavior: 'smooth'`, the browser animates the scroll, providing a better user experience than an instant jump. The `block` option allows you to specify where the element should be aligned within the scrollable area (e.g., 'start' means the element's top will be aligned to the top of the viewport).