Hi,

On the Skull Biker template here, the Bootstrap nav menu links get highlighted when the id=”” tag is scrolled to.

However, this only works if the anchor tag and the id tag are on the same page and if the anchor links start with a hash.   

1. <a class="page-scroll" href="#home">Home</a>

1. <div Id=”home”></div>

When I add a normal URL in front of the #, the functionality does not get carried forward to the new page.

What I would like to is change page and still have the links highlighted when a corresponding id="" is scrolled to. 

All pages use the same layout page which references the dependencies for this functionality and a generic header containing the nav menu too, so I thought the highlighting functionality should work on every page.  

Also, the JQuery page scrolling feature code below only seems to use the href attribute; there’s no mention of a #, so I cannot figure out why a # is needed at the start of the anchor tag link to make this work.

Why is this not working as is, and how can I make this happen please?  Help would be appreciated. Thanks.

The code that adds the active class seems to be this:

1. // jQuery for page scrolling feature - requires jQuery Easing plugin
2. $(function() {
3.     $('a.page-scroll').bind('click', function(event) {
4.         var $anchor = $(this);
5.         $('html, body').stop().animate({
6.             scrollTop: $($anchor.attr('href')).offset().top
7.         }, 1500, 'easeInOutExpo');
8.         event.preventDefault();
9.     });
10. });
11.  
12. // Highlight the top nav as scrolling occurs
13. $('body').scrollspy({
14.     target: '.navbar-fixed-top'
15. })
16.  
17. // Closes the Responsive Menu on Menu Item Click
18. $('.navbar-collapse ul li a').click(function() {
19.     $('.navbar-toggle:visible').click();
20. });