Adding smooth scrolling to links like these below (i.e. starting with a # in the 'href' attribute):
Clicking on the link above will smooth scroll down to div#GetStarted
/**
* 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
}
});
}
}
});
}