Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        
        <script src="//code.jquery.com/jquery-latest.min.js"></script>
        <script>
            var pagestart = 0;
            var currentlyat = pagestart;
            var lastScrollTop = 0;
            
            $(document).ready(function(){
                
                function scrollPageTo(a){
                    if(a == 0){
                        $('#top').show();
                        $('#top').animate({
                            top: 0
                        }, 1000, function(event){
                            $('#page').css('top', $(window).height()).hide();
                        });
                    }
                    else
                    {
                        $('#page').hide();
                        $('#page').animate({
                            top: 0
                        }, 1000, function(event){
                            $('#top').css('top', $(window).height()).hide();
                        });
                    }
                }
                
                if(pagestart == 0){
                    $('#top').css('height', $(window).height());
                    $('#page').hide();
                }
                else
                {
                    $('#top').hide();
                    $('#page').css('height', $(window).height());
                }
                
                $(window).scroll(function(){
                    if(currentlyat == 0){
                        if(($(this).scrollTop() < lastScrollTop) && $(this).scrollTop() == 0){
                            scrollPageTo(1);
                        }
                    }
                    else
                    {
                        if(($(this).scrollTop() > lastScrollTop) && $(this).scrollTop() == 0){
                            scrollPageTo(0);
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="top"><h1>This is top</h1></div>
        <div id="page"><h1>This is page</h1></div>
    </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers