- Is there a way to use jQuery to determine when the user has scrolled 50% of the screen? (For example, scrolling 50px)
- After detecting this scrolling milestone, how can we smoothly animate the page to #second, or effectively move to the top at 100%? (There seems to be a strange behavior during the animation)
Check out the example here: http://jsfiddle.net/NH6Km/2/
JQUERY:
$(function(){
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
('body,html').animate({ scrollTop:
$('#second').offset().top }, 1500);
}
});
})
HTML:
<div id="first"></div>
<div id="second"></div>
CSS:
#first{
position:absolute;
width:100%; height:100%;
background:blue;
}
#second{
position:absolute;
top:100%;
width:100%; height:100%;
background:yellow;
}