I’m using version 2.1.
There was a smooth-scroll-link class function in version 2.1. The problem I had with this function is it wouldn’t update the nav-line styling.
It also wouldn’t handle partial single page websites. If you want to see what I mean check out skipthelinevegas.com. The navigation has a smooth scroll effect on the homepage, but if you visit Terms & Conditions the navigation will still work. Your class function only worked for links pointing to same page they were on.
My issue is with the mobile menu though. Check out the site on your phone. If you click a mobile menu link it does the smooth scroll effect but the menu stays open. I was hoping there was a javascript function I could use to close the mobile menu without having to mess with css styles.
// intercept menu clicks
jQuery('.menu-item a').click(function(){
// link points to an anchor on the same page. update nav-line style and scroll to content
if (window.location.pathname) {
// hide nav-line for all menu items
jQuery('.nav-line').hide();
// show nav-line on this link clicked
jQuery(this).children('.nav-line').show();
// get name of anchor and scroll to content
var anchor = jQuery(this).attr('href').substr(1);
scrollSkip(anchor);
return false;
} else {
// link does not point to an anchor on the same page. redirect page normally.
return true;
}
});
// modified version of your internally scrolling function
function scrollSkip(linkHref)
{
var spacerHeight = jQuery(linkHref).height(),
headerHeight = 0;
if (jQuery('.sticky-header').length > 0) {
headerHeight = jQuery('.sticky-header').height();
}
if (jQuery('#wpadminbar').length > 0) {
headerHeight = headerHeight + 28;
}
jQuery('html, body').stop().animate({
scrollTop: jQuery(linkHref).offset().top + spacerHeight - headerHeight
}, 1000, 'easeInOutExpo');
}
.