jquery - Single page scrolling nav items don't work on different page -
i have built wordpress theme accommodates both single page layout , separate pages (i.e. pages navigate away front page). single page layouts, click on nav item , scrolls section. have achieved giving section id , putting id in menu link (i.e. #about or #contact).
this code scrolls page section:
jquery(document).ready(function($){ jquery('a[href*=#]').click(function (e) { e.preventdefault(); var navheight = jquery('#header').height(); var id = jquery(this).attr('href'); var scrollto = jquery(id).offset().top-navheight; jquery('html,body').animate({ 'scrolltop': scrollto }, 500); }); });
the problem i'm having, when navigate away page, , click on menu item typically scroll down page - menu items not work.
i have tried using full url , using '/#id' neither of options work. there workaround can use here?
maybe can try following code
jquery(document).ready(function($){ // nav height can set here if same var navheight = jquery('#header').height(); // check if have hash (when come on home) if( window.location.hash !== "" ) { var scrollto = jquery(window.location.hash).offset().top-navheight; jquery('html,body').animate({ 'scrolltop': scrollto }, 500); }// if // use previous code if we're on home page (thanks wp body_class() ) jquery('.home #nav a[href*=#]').click(function (e) { e.preventdefault(); var id = jquery(this).attr('href'); var scrollto = jquery(id).offset().top-navheight; jquery('html,body').animate({ 'scrolltop': scrollto }, 500); }); });
it can contains error, or may need little change general idea here.
the main change check if have hash in current url, , if it's case scroll on element.
you need change menu's links absolute url (or /index.php#lorem) links customs shouldn't impact much.
hope can helps you
remember didn't tested code, can face issues.
Comments
Post a Comment