Menu secondary links to anchor links and smoothScroll content
Hi Everyone,
I'm new to jquery and hoping that someone might be able to help me resolve my problem. I've spent a lot of hours testing and scouring the internet to try and find a solution.
I have a main menu navigation that has secondary links to a page with anchor links that open up content below it using smoothScroll. I’ve been able to get the anchor links on the page to highlight after being selected and the secondary links in the main menu nav to go to the correct content, but if I select one of the secondary links from the main navigation [under 'Betts Lake'] the anchor link image [e.g. Image of House and name of house type Crane, Heron, Peregrine, Redtail] doesn’t highlight the picture icon and shows the highlight on the secondary link in the main menu nav of the "Betts Lake" dropdown [makes the text white so you can't see it]. I've attached an icon of what the image anchor links are supposed to look like once they've been selected. I’m sure I’m missing something simple but I can’t see it. This is the link to the page in question:
https://c1992.paas2.tx.modxcloud.com/index.php?id=6
Here's the jquery code:
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
$('#layoutbg1 a,#layoutbg2 a,#layoutbg3 a,#layoutbg4 a,.navnew2 ul li a').click(function(){
$('#layoutbg1 a,#layoutbg2 a,#layoutbg3 a,#layoutbg4 a').removeClass('active');
$(this).addClass('active');
});
});
</script>