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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
​
​
<style type="text/css">
  div {
    font-size: 3em;
  }
  
  #status {
    position: fixed;
    width: 40%;
    left: 50%;
    margin-left: -20%;
    font-size: 1.5em;
    text-align: center;
    border:1px solid grey;
  }
  
  #upcontent {
    position:absolute;
    top: 500px;
      border:1px solid red;
  }
  
  #downcontent {
    position:absolute;
    top: 1500px;
    border:1px solid green;
  }
  
  #stretch {
    position:absolute; top: 6000px;
    border:1px solid black;
  }
</style>
</head>
<body style="overflow-y: auto;">
<div id="status"></div>
<div>Try to scroll down.</div>
<div id='upcontent'>I'm at 500px</div>
<div id='downcontent'>I'm at 1500px</div>
<div id='stretch'>Welcome to the bottom!</div>
</body>
</html>
 
$(function(){
  var status = $('#status');
  var offset = $("#downcontent").offset();
  var height = $("#downcontent").height();
  var animating = false;
  var prevpos = $(window).scrollTop();
​
  $(window).scroll(function(){
    var curpos = $(window).scrollTop();
    if (curpos > prevpos && !animating) {
      $('html').animate( 
        {scrollTop: offset.top + height},
        1000,
        "easeInOutQuart",
        function(){
          $('html').animate(
            {scrollTop: offset.top},
            1000,
            "easeOutBounce",
            function(){
              animating = false;
              status.html('Both animations finished.<br />');
            }
          );
          status.html('First animation finished.<br />Second animation started<br />');
        }
      );
      animating = true;
      status.html('First animation started<br />');
    }
    prevpos = curpos;
  });
  
});
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers