Is it possible to slow down the scroll from a particular section of the page?

Question

I have a single-page project, where when you scroll down, you will make a drill animation by drilling through the layers of the earth, until at the end, when you drill through the water, the screen automatically rolls to the top. It turns out, when I get to the water part, I want to slow down the roll, 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();
})

Jsfiddle

Answer 1

Change the animation speed to take longer to run. If I am not in error the animate jquery has a property that defines the millisecond duration of the animation. You are already running out of duration:

$("html, body").animate({ scrollTop: 0 }, 1500);

Now just increase:

$("html, body").animate({ scrollTop: 0 }, 5000);