Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Intercepts clicks on links and cancels them #24

Open
boosh opened this issue Feb 7, 2016 · 6 comments
Open

Intercepts clicks on links and cancels them #24

boosh opened this issue Feb 7, 2016 · 6 comments

Comments

@boosh
Copy link

boosh commented Feb 7, 2016

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.

@awitherow
Copy link

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?

@jdart
Copy link

jdart commented Mar 8, 2016

Same issue happening to me intermittently,

@awitherow
Copy link

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

@zdavis
Copy link

zdavis commented May 6, 2016

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.

@cideM
Copy link

cideM commented Aug 13, 2016

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?

@superhussain
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants