Smooth scrolling for hash links in Blazor

hashLinkScrolling.js

// Smooth scrolling for hash links
function hashLinkScrolling() {
    // Get all links that start with #
    const hashLinks = document.querySelectorAll('a[href^="#"]');

    hashLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            // Prevent default anchor behavior
            e.preventDefault();

            // Get the href value (the hash)
            const targetId = this.getAttribute('href');

            // Skip empty hashes or just "#"
            if (!targetId || targetId === '#') {
                return;
            }

            // Find the target element
            const targetElement = document.querySelector(targetId);
            if (!targetElement) {
                return;
            }

            // Smooth scroll to the target element
            targetElement.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        });
    });
}

// Update on page load
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', hashLinkScrolling);
} else {
    hashLinkScrolling();
}