smoothScroll
smoothScroll copied to clipboard
Intercepts clicks on links and cancels them
Trying to use this with react-router, it fails if element
is null in the function getTop
, breaking the app if the element to scroll to hasn't been rendered (e.g. because it's on a different page of the app). It also seems to fiddle in various ways with the location which also risks breaking apps.
It's a shame because it was doing exactly what I wanted until I noticed this.
Yeah I just ran into this as well, using it in a React project. I'm getting the following error.
Uncaught TypeError: Cannot read property 'nodeName' of nullgetTop
@ smoothscroll.js?f2bb:32 smoothScroll
@ smoothscroll.js?f2bb:62 linkHandler
@ smoothscroll.js?f2bb:98
In the component, I am not requiring or even using smoothscroll, but it's taking over globally?
Same issue happening to me intermittently,
I've had to remove it temporarily from the project that I was using it on.
Yeah, it's not react friendly at all—mainly because when you include it, it's going to add click handlers to all hash links.
Anyone have a code example? Maybe my skills are just too low to immediately get what's going on, but I can't reproduce these errors... so out of sheer curiosity, any concrete examples of these issues?
I was able to fix this on my React app by simply going into the smoothScroll.js file and editing the var internal = document.querySelectorAll('a[href^="#"]:not([href="#"])'), a;
near the bottom to only look at anchor links with the class scroll
. Consider making this the default behaviour?
// We look for all the internal links in the documents and attach the smoothscroll function
document.addEventListener("DOMContentLoaded", function () {
// scope to anchor links with the 'scroll' class
var internal = document.querySelectorAll('a.scroll[href^="#"]:not([href="#"])'), a;
for(var i=internal.length; a=internal[--i];){
a.addEventListener("click", linkHandler, false);
}
});
// return smoothscroll API
return smoothScroll;
});