I have a single page project, where when scrolling down, it will make a drill animation piercing the layers of the earth, until at last, when drilling the water, the screen automatically rolls to the top. It happens, that when I get to the water part, I want to slow down the scrolling, because it's bothering me the way it happens.
HTML
<header id="topo">
</header>
<div id="content">
<div id="broca">
</div>
</div>
<footer id="water">
</footer>
CSS
header, footer{
display:block;
height:700px;
background:red;
width:100%;
}
#content{
display:block;
width:100%;
height:1500px;
background:blue;
}
#broca{
width:50px;
height:0;
background:#000;
max-height:1500px;
}
JQuery
var counter = 0;
$(function(){
$(window).scroll(function() {
var $broca = $('#broca');
var st = $(this).scrollTop();
if (st > $broca.height()){
$broca.clearQueue().animate({
height: st } , 500);
}
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
if (counter == 0){
counter++;
$("html, body").animate({ scrollTop: 0 }, 1500);
}
}
});
if( st == 0 ) {
} else {
$broca.show();
}
}).scroll();
})