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">
<title> </title>
​
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    
$(function(){
           
    $(".down").click(function() {
      $(".text").animate({ scrollTop: '+=200' });
    });
​
})
​
</script>
​
<style type="text/css">
<!--
​
.grey{
    position:absolute;
    left:50px;
    top:50px;
    width:540px;
    height:490px;
    background-color:#f2f2f2;
    color:#666;
    text-align:justify;
}
​
.text{ position: absolute; top: 60px; left: 60px; width:400px; height:380px; overflow: hidden; }
​
.down{
    position:absolute;
    bottom: 10px;
    left: 250px;
    width: 30px;
    height: 20px;
    background-color: black;
    cursor: pointer;
}
​
-->
</style>
​
</head>
​
<body>
​
<div class="grey">
​
<div class="text">Lorem ipsum dolor sit amet, praesent diam, nunc sapien senectus rutrum velit eum, scelerisque sit. Vel congue laoreet, vivamus massa ut erat, ultricies suscipit lacinia ante sapien at, sapien volutpat libero volutpat convallis sem diam. Pede eget, vel gravida, iaculis orci vel maecenas porttitor scelerisque elementum, scelerisque donec in rhoncus. Ut dignissim enim tincidunt vitae vel at, tellus consectetuer quisque ut, rhoncus sit ut mauris congue, risus tincidunt at nisl sed cras luctus. Mollis et ut, proin urna eu morbi ac nostra enim, nibh adipiscing nulla, consectetuer aliquam nec cras eget tortor placerat, non et purus. Id felis velit eu, dolor bibendum, urna ut aliquam donec, at lectus ac mauris luctus donec. Natoque lacinia wisi, adipiscing consequat, in sollicitudin, ut dui rutrum et, erat varius magna sapien in dicta. Dolor nulla arcu sollicitudin morbi lacinia enim. Ligula vitae neque ultrices leo per, egestas nonummy, cras maecenas duis auctor in ut. Eu magna bibendum quaerat tincidunt, ullamcorper imperdiet nec faucibus sem, in egestas velit, diam blandit augue. Nunc convallis a pretium, enim a bibendum pretium, tellus vehicula sollicitudin vivamus.
Pede egestas cursus, sit sit morbi ac integer wisi egestas, praesent amet mi et nec, quisque viverra fringilla sed lectus, tempor lacinia maecenas arcu vel. Ullamcorper duis quisque laoreet tempus purus, lorem rutrum eu a dolor sed, amet urna scelerisque vestibulum auctor ridiculus nunc, neque vitae nullam nec amet. Lectus maecenas neque, est id dictumst, lobortis elementum aenean eros, pharetra lobortis, non sollicitudin cras illo. Est aliquet vel rutrum vitae, aenean maecenas lacus eu odio, a tempus arcu. Vel in sit, eget gravida mauris sapien. Quis sed accumsan vitae risus justo diam, vestibulum leo porta malesuada ut orci dolor, morbi iaculis. In sit euismod ipsum sapien ut ut, proin porta cursus posuere rutrum per, augue sed mauris nulla egestas, turpis mi lacus fringilla.
</div>
​
<div class="down"> </div>
​
</div><!-- final grey -->
​
​
​
​
</body>
</html>
​
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers