javascript jQuery Smooth Scrolling

Posted 2021-05-03

/**
 * Document Ready
 */
jQuery(function() {
    initSmoothScrolling();
});

/**
 * Smooth scrolling
 */ 
function initSmoothScrolling() {
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function(event) {
        // On-page links
        if (
            location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
            &&
            location.hostname == this.hostname
        ) {
            // close the header navigation on phones
            var buttonMobileNavigation = $('#ToggleMobileNavigation');
            if (buttonMobileNavigation.is(":visible")) {
                $('ul#Navigation').slideUp(100);

                buttonMobileNavigation.toggleClass('is-active');
            }

            // Figure out element to scroll to
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            // Does a scroll target exist?
            if (target.length) {
                // Only prevent default if animation is actually gonna happen
                event.preventDefault();

                // check if the mobile toggle navigation button is visible
                var additionalOffset = 0;
                //if ($('#ToggleMobileNavigation').is(":visible")) {
                //    additionalOffset = $('header').first().height();
                //}

                $('html, body').animate({
                    scrollTop: (target.offset().top - additionalOffset)
                }, 1000, function() {
                    // Callback after animation
                    // Must change focus!
                    var $target = $(target);
                    $target.focus();
                    if ($target.is(":focus")) { // Checking if the target was focused
                        return false;
                    } else {
                        $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
                        $target.focus(); // Set focus again
                    }
                });
            }
        }
    });
}