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>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="sidebar">
    <li><a class="scroll" href="#first">FIRST ITEM</a></li>
    <li><a class="scroll" href="#second">SECOND ITEM</a></li>
    <li><a class="scroll" href="#third">THIRD ITEM</a></li>
    <li><a class="scroll" href="#fourth">FOURTH ITEM</a></li>
    <li><a class="scroll" href="#fifth">FIFTH ITEM</a></li>
</div>
​
<div class="main">
    <div id="first">
        <p><strong>FIRST ITEM</strong></p>
        <p>
Phasellus tempus arcu dolor, at aliquam est laoreet vel. Nunc ipsum tortor, dapibus sed elementum ut, hendrerit id mauris. In sagittis mauris ac sem tristique facilisis. Vestibulum id sapien a nibh sollicitudin convallis. Praesent pretium arcu tortor, scelerisque facilisis erat malesuada nec. Ut scelerisque porta ante. Praesent cursus metus tortor, semper semper ante fermentum et. Praesent in iaculis risus. Ut eleifend condimentum dui, sit amet bibendum sapien dictum a. Morbi iaculis elit sit amet lobortis bibendum. Duis in orci eros. Duis mollis ultricies quam non porttitor. Maecenas ut varius magna. Nunc risus magna, porttitor nec lobortis et, sollicitudin at ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce auctor tortor non interdum sagittis. Proin tincidunt erat vel elit hendrerit, in feugiat mauris euismod. Donec odio ex, lobortis sed dolor at, tincidunt placerat turpis. Sed viverra, nisl ut vestibulum pellentesque, leo orci sollicitudin orci, vel sodales diam augue vitae risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque mattis est enim, ut elementum libero faucibus sit amet. Vestibulum ultricies aliquet nibh, tempor eleifend mi.
        </p>
    </div>
    
    <div id="second">
        <p><strong>SECOND ITEM</strong></p>
        <p>
Phasellus tempus arcu dolor, at aliquam est laoreet vel. Nunc ipsum tortor, dapibus sed elementum ut, hendrerit id mauris. In sagittis mauris ac sem tristique facilisis. Vestibulum id sapien a nibh sollicitudin convallis. Praesent pretium arcu tortor, scelerisque facilisis erat malesuada nec. Ut scelerisque porta ante. Praesent cursus metus tortor, semper semper ante fermentum et. Praesent in iaculis risus. Ut eleifend condimentum dui, sit amet bibendum sapien dictum a. Morbi iaculis elit sit amet lobortis bibendum. Duis in orci eros. Duis mollis ultricies quam non porttitor. Maecenas ut varius magna. Nunc risus magna, porttitor nec lobortis et, sollicitudin at ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce auctor tortor non interdum sagittis. Proin tincidunt erat vel elit hendrerit, in feugiat mauris euismod. Donec odio ex, lobortis sed dolor at, tincidunt placerat turpis. Sed viverra, nisl ut vestibulum pellentesque, leo orci sollicitudin orci, vel sodales diam augue vitae risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque mattis est enim, ut elementum libero faucibus sit amet. Vestibulum ultricies aliquet nibh, tempor eleifend mi.
        </p>
    </div>
    
    <div id="third">
        <p><strong>THIRD ITEM</strong></p>
        <p>
Phasellus tempus arcu dolor, at aliquam est laoreet vel. Nunc ipsum tortor, dapibus sed elementum ut, hendrerit id mauris. In sagittis mauris ac sem tristique facilisis. Vestibulum id sapien a nibh sollicitudin convallis. Praesent pretium arcu tortor, scelerisque facilisis erat malesuada nec. Ut scelerisque porta ante. Praesent cursus metus tortor, semper semper ante fermentum et. Praesent in iaculis risus. Ut eleifend condimentum dui, sit amet bibendum sapien dictum a. Morbi iaculis elit sit amet lobortis bibendum. Duis in orci eros. Duis mollis ultricies quam non porttitor. Maecenas ut varius magna. Nunc risus magna, porttitor nec lobortis et, sollicitudin at ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce auctor tortor non interdum sagittis. Proin tincidunt erat vel elit hendrerit, in feugiat mauris euismod. Donec odio ex, lobortis sed dolor at, tincidunt placerat turpis. Sed viverra, nisl ut vestibulum pellentesque, leo orci sollicitudin orci, vel sodales diam augue vitae risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque mattis est enim, ut elementum libero faucibus sit amet. Vestibulum ultricies aliquet nibh, tempor eleifend mi.
        </p>
    </div>
    
    <div id="fourth">
        <p><strong>FOURTH ITEM</strong></p>
        <p>
Phasellus tempus arcu dolor, at aliquam est laoreet vel. Nunc ipsum tortor, dapibus sed elementum ut, hendrerit id mauris. In sagittis mauris ac sem tristique facilisis. Vestibulum id sapien a nibh sollicitudin convallis. Praesent pretium arcu tortor, scelerisque facilisis erat malesuada nec. Ut scelerisque porta ante. Praesent cursus metus tortor, semper semper ante fermentum et. Praesent in iaculis risus. Ut eleifend condimentum dui, sit amet bibendum sapien dictum a. Morbi iaculis elit sit amet lobortis bibendum. Duis in orci eros. Duis mollis ultricies quam non porttitor. Maecenas ut varius magna. Nunc risus magna, porttitor nec lobortis et, sollicitudin at ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce auctor tortor non interdum sagittis. Proin tincidunt erat vel elit hendrerit, in feugiat mauris euismod. Donec odio ex, lobortis sed dolor at, tincidunt placerat turpis. Sed viverra, nisl ut vestibulum pellentesque, leo orci sollicitudin orci, vel sodales diam augue vitae risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque mattis est enim, ut elementum libero faucibus sit amet. Vestibulum ultricies aliquet nibh, tempor eleifend mi.
        </p>
    </div>
    
    <div id="fifth">
        <p><strong>FIFTH ITEM</strong></p>
        <p>
Phasellus tempus arcu dolor, at aliquam est laoreet vel. Nunc ipsum tortor, dapibus sed elementum ut, hendrerit id mauris. In sagittis mauris ac sem tristique facilisis. Vestibulum id sapien a nibh sollicitudin convallis. Praesent pretium arcu tortor, scelerisque facilisis erat malesuada nec. Ut scelerisque porta ante. Praesent cursus metus tortor, semper semper ante fermentum et. Praesent in iaculis risus. Ut eleifend condimentum dui, sit amet bibendum sapien dictum a. Morbi iaculis elit sit amet lobortis bibendum. Duis in orci eros. Duis mollis ultricies quam non porttitor. Maecenas ut varius magna. Nunc risus magna, porttitor nec lobortis et, sollicitudin at ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce auctor tortor non interdum sagittis. Proin tincidunt erat vel elit hendrerit, in feugiat mauris euismod. Donec odio ex, lobortis sed dolor at, tincidunt placerat turpis. Sed viverra, nisl ut vestibulum pellentesque, leo orci sollicitudin orci, vel sodales diam augue vitae risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque mattis est enim, ut elementum libero faucibus sit amet. Vestibulum ultricies aliquet nibh, tempor eleifend mi.
        </p>
    </div>
</body>
</html>
 
var DefaultContentHeight = $(".main").height();
​
var dynamicHeight = function(target){
  var wHeight = $(window).height();
  var spaceLeft = $(".main").height() - $(target).offset().top;
  var extraSpace = wHeight - spaceLeft;
    //console.log(extraSpace);
    $(".main").height($(".main").height() + extraSpace);
    //console.log($(".main").height());
    //console.log(wHeight +","+spaceLeft);  
};
​
var smoothScroll = function(){
    $('a.scroll').click(function(e) {
        e.preventDefault();
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
              dynamicHeight(target);              
                $('html,body').animate({
                    scrollTop: target.offset().top 
                }, 1000);
                return false;
            }
        }
    });
};
​
​
​
​
​
$(document).ready(function(e) { 
  smoothScroll();
  
    
});
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers