Scrolling Anchor Links
BennyHudson opened this issue · 1 comments
Hello there, love midnight.js, but I've just encountered an issue with it that I can't work out.
My header has a nav in it which contains links and scrolling anchors:
`
`
For some reason, the link that should scroll down the page doesn't work. Here's the js
$('.home-scroller a').click(function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $('#target').offset().top - 100 }, 500); });
The same code works elsewhere on the page, but not in the midnight header. Is there something I'm missing?
If the click event works on normal markup but stops working then you use midnight, my first guess would be that the click handler is being registered before midnight.js is initialized.
Midnight creates multiple copies of the header, so if you have any bindings (like that click) they tend to stop working on any copies that are not the original.
A simple fix for this is just handling the click higher up on the dom (in the nav, for instance), and then catching only the events that come from links. For instance:
$('nav').on('click', 'a', function(event){ /* Do the scrolling stuff */ });