Skip to content
This repository has been archived by the owner on Apr 28, 2020. It is now read-only.

doesnt scroll up from the bottom #49

Closed
Arnold85 opened this issue Mar 17, 2014 · 16 comments
Closed

doesnt scroll up from the bottom #49

Arnold85 opened this issue Mar 17, 2014 · 16 comments
Labels

Comments

@Arnold85
Copy link

Hi,
thanks very much for this project. It was looking great immediately. But I have a problem.
When I scroll down to the absolute bottom of my page there is a fault behavior. When I click any link there (links to a different position on the same site) there is just a little jump upwards approximately a pixel or so. If I hit the link about 15 times it goes up 1 pixel but then suddenly on the 16th time it scrolls smoothly to the right position.
If I first scroll up a little manually it works on the first click. I couldn't figure out what the problem is. Any advice?

@cferdinandi
Copy link
Owner

I too have encountered that myself, and have never been able to isolate a cause. Based on another bug that cropped up, I may have a fix for it, though. Is there a demo site somewhere that I can use to debug this?

In the interim, using the easeOut* easing types seemed to solve the issue, if memory serves correctly.

@Arnold85
Copy link
Author

Great, thanks for the fast reply. That helped.
Sorry I dont have a demosite right now.

@cferdinandi
Copy link
Owner

You shouldn't need to use such a lame fix though. It should work with all easing types. Thanks for the bug report!

@cferdinandi
Copy link
Owner

Hey, any chance you could email me a zip of your site in progress? I'm having a touch time duplicating the problem, and having a working example would help me come up with a more proper fix.

http://gomakethings.com/about/

@JonasHavers
Copy link
Contributor

I can confirm the issue. The problem is related to the use of the document.body.scrollHeight property for identifying the document's body height, at least in Firefox browsers. Chrome and Safari just work fine here.

I am using a fixed header. This is what happens:
The scroll animation starts and is stopped immediately by the function _stopAnimateScroll after the first calculated animation step, because the last if-condition evaluates to true: (window.innerHeight + currentLocation) >= document.body.scrollHeight. In Chrome and Safari, it is always ok, but in Firefox (window.innerHeight + currentLocation) is greater than document.body.scrollHeight with a difference of my fixed header's height (minus one). So, subtracting the fixed header height (headerHeight) is a workaround for me, although it will have disadvantages for others: (window.innerHeight + currentLocation - headerHeight) >= document.body.scrollHeight.

The issue can be fixed by using the following cross-browser solution of identifying the document height: http://james.padolsey.com/javascript/get-document-height-cross-browser/

I hope this helps. By the way, thank you for your great work so far! I discovered smooth scroll three days ago and I am using it on my website http://www.jonas-havers.de (german) which just launched yesterday.

@cferdinandi
Copy link
Owner

Jonas - Thanks for sharing that link! I'll take a look and make updates as neccessary. Cheers!

@cferdinandi
Copy link
Owner

Also, it hadn't occurred to me that if the link is at the very bottom of the page, that condition would stop the animation. That gives me another angle to explore. Thanks again!

@cferdinandi
Copy link
Owner

And just noticed your pull request. Will test tomorrow. Thanks!

@cferdinandi
Copy link
Owner

fixed

@JesseLivingston1
Copy link

Hi there. Is this fix merged into the latest version? I see this was merged into the master branch but have the same issue though I just downloaded it today. In the interim, the "easeOut" option is solving the problem, but curious why this fix isn't working for me. I don't have a live site up yet to demo this.

@cferdinandi
Copy link
Owner

When you have a chance to get a demo set up, please do share the link. This should be solved in the current version, but there could be some weird bug or edge case I haven't come across yet.

@dennisperremans
Copy link

Thank you! This solved it for me.
I've changed easing: 'easeInOutCubic' to easing: 'easeOut'.

@cferdinandi
Copy link
Owner

@dennisperremans Sorry you had to update your easing method. I'm wondering if there's a weird rounding issue happening or something..

@goodguyry
Copy link

Thanks @cferdinandi and @JonasHavers for the details. I thought I was losing my mind. The easeOut* fix worked for me, too. Thanks again!

@bastardesigns
Copy link

@cferdinandi check deleting the line selected in the img. I can fix the problem of stoping scroll at the bottom.
image

@cferdinandi
Copy link
Owner

@bastardesigns That line is needed to prevent an infinite loop from happening if the scroll target is outside of the window.

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

No branches or pull requests

7 participants