Programmatically Scrolling an Element into View with Smooth Behavior

// HTML Example:
// <div style="height: 1500px;">Scroll down to see element</div>
// <button id="scrollToTargetBtn">Scroll to Target</button>
// <div id="targetElement" style="height: 200px; background-color: lightblue; margin-top: 1000px;">I am the target element!</div>

const scrollToTargetBtn = document.getElementById('scrollToTargetBtn');
const targetElement = document.getElementById('targetElement');

scrollToTargetBtn.addEventListener('click', () => {
    // Scroll the target element into view
    targetElement.scrollIntoView({
        behavior: 'smooth', // Makes the scroll animation smooth
        block: 'start',     // Aligns the element's top to the viewport's top
        inline: 'nearest'   // Aligns the element's left/right to the nearest edge
    });
    console.log('Scrolled to target element.');
});

// Example with different options
const anotherElement = document.createElement('div');
anotherElement.id = 'anotherElement';
anotherElement.style.cssText = 'height: 300px; background-color: lightgreen; margin-top: 500px;';
anotherElement.textContent = 'Another element to scroll to (end)';
document.body.appendChild(anotherElement);

setTimeout(() => {
    // Scroll to another element, aligning its bottom to the viewport's bottom
    anotherElement.scrollIntoView({
        behavior: 'smooth',
        block: 'end'
    });
    console.log('Scrolled to another element (block: end).');
}, 2000); // Scroll after 2 seconds