/    Sign up×
Community /Pin to ProfileBookmark

jquery scroll to top from certain point.

Copy linkTweet thisAlerts:
May 29.2012

I’ve come close with this but the solutions I’ve seen aren’t quite nailing it.

I know how to animate a scroll to the top of a page, and I also know how to trigger that when a user has scrolled down to a certain depth, but what I’m struggling to build, is a way to allow the user scroll past that certain depth (say, 1000px) but the second they release the scroll bar, the bottom of the viewable portion animates back up to the 1000px mark.

The closest solution I’ve seen hijacks the user’s view the instant the scroll bar crosses the 1000px threshold, and tries to animate back immediately, but because the user is still dragging, the animation is triggered again and again and so on. This is horribly jerky and confusing.

The key is the delay in waiting for the user to disengage the scroll bar before the view animates back up.

Is there any simple way in jquery to do this?

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@holyhttpMay 30.2012 — You can use window.scrollTo(0,1000) to scroll back up to the position you want.

Your challenge is really detecting when the user stops scrolling.

You could create a timer that would trigger the scrollBack() function

var backtimer;

$(document).scroll(function(){

clearTimeout(backtimer);

backtimer=setTimeout(scollBack,1000);

});

function scrollBack(){

clearTimeout(backtimer);

window.scrollTo(0,1000); //or animate

}
Copy linkTweet thisAlerts:
@andidas311authorJun 05.2012 — Hmmm, I'm not sure that that's working in the context I'm trying to apply this in. Alternately to a scroll option, is there a way to temporarily force the height of the html or body tag, so that the regular scroll bar conforms to the height required?
×

Success!

Help @andidas311 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...