How to auto-scroll to the top when viewing the page footer?

Navigation
6

I'm making a website, which has some animations, and when I get to the bottom of the site for the first time, should trigger an event where the page returns to the top, but in the following times (without reloading) the event will not happen again.

How could I do this?

HTML: 

<header>
</header>
<div id="content">
    <div id="broca">
    </div>
</div>
<footer>    
</footer>

CSS: 

header, footer{
display:block;
height:200px;
background:red;
width:100%;
}
#content{
    display:block;
    width:100%;
    height:1500px;
background:blue;
}
#broca{
    width:50px;
    height:0;
    background:#000;
}

JQuery: 

$(function(){
$(window).scroll(function() {
        var $broca = $('#broca');
        var st = $(this).scrollTop();
        if (st > $broca.height()){
            $broca.clearQueue().animate({
                height: st } , 1000);
        }
        if( st == 0 ) {

        } else {
            $broca.show();
        }
    }).scroll();
})

JsFiddle

    
asked by anonymous 27.08.2014 / 20:03

2 answers

1

Declare this variable before the function: 

var counter = 0;

Add this: 

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
               if (counter == 0){
                   counter++;
               $("html, body").animate({ scrollTop: 0 }, "slow");
        }
    }
});

Look better here: JSFiddle

    
27.08.2014 / 20:50
2

Here's your code: 

$(document).ready(function(){
    var $documentHeight = $(document).height();
    var $windowHeight = $(window).height();
    var $scrollHeight = $documentHeight - $windowHeight;
    var $toBottom = false;

    $(window).scroll(function(){
        var $broca = $('#broca');

        var st = $(this).scrollTop();

        if(st > $broca.height()){
            $broca.clearQueue().animate({height: st}, 1000);
        }

        if(st == $scrollHeight && $toBottom == false){
            $(this).scrollTop(0);
            $toBottom = true;
        }

        if(st != 0){
            $broca.show();
        }
        else{
            $broca.hide();
        }
    });
});

You can test here: JSFiddle

    
27.08.2014 / 20:47
set the position of the "search cancel" button in an input type = search in Safari 7 Entity FrameWork relationship many x many extra field