smoothScroll icon indicating copy to clipboard operation
smoothScroll copied to clipboard

Intercepts clicks on links and cancels them

Open boosh opened this issue 9 years ago • 6 comments

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.

boosh avatar Feb 07 '16 12:02 boosh

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?

awitherow avatar Mar 03 '16 11:03 awitherow

Same issue happening to me intermittently,

jdart avatar Mar 08 '16 16:03 jdart

I've had to remove it temporarily from the project that I was using it on.

awitherow avatar Mar 08 '16 19:03 awitherow

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.

zdavis avatar May 06 '16 20:05 zdavis

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?

cideM avatar Aug 13 '16 13:08 cideM

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;
});

superhussain avatar Oct 10 '16 17:10 superhussain