<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<meta charset="utf-8">
<title>Demo by Roko C.B.</title>
</head>
<body>
<div id="links">
<ul>
<li><a href="#a">a</a></li>
<li><a href="#b">b</a></li>
<li><a href="#c">c</a></li>
<li><a href="#d">d</a></li>
</ul>
</div>
<div class="content">
<h2 id="a">A</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue nunc, laoreet at pharetra non, vulputate vitae libero. Pellentesque ultricies bibendum mi, quis pretium dui bibendum vitae. Vivamus eu cursus ante. Sed viverra diam ac est rhoncus semper. Mauris nisl tellus, lacinia id sollicitudin sit amet, mattis ut felis. Nulla eget dolor sit amet massa rhoncus porttitor. Sed rutrum dolor at turpis elementum sollicitudin pretium lectus porta. Donec vestibulum auctor mattis. Praesent lacinia bibendum luctus. Aenean consectetur, nibh sed interdum laoreet, magna erat accumsan felis, nec faucibus est lacus sed libero. Donec neque dui, suscipit eu luctus sed, fermentum quis leo. Suspendisse et nisi vel leo ultrices consequat.
Nulla auctor bibendum neque in posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus egestas pharetra sapien ut dignissim. Fusce non felis urna, quis sagittis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin tristique sagittis. Quisque elementum, orci in pharetra volutpat, velit urna iaculis metus, nec hendrerit ante mauris at diam. Sed elit arcu, imperdiet ut molestie eu, egestas quis purus. Duis nec turpis diam. Morbi sit amet mauris libero. Nam posuere fringilla vehicula. Ut dapibus congue justo, sit amet placerat dolor consectetur sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis in lorem eu quam tincidunt mollis. Sed eget tortor vitae magna porttitor lobortis id id nisl. Fusce mattis interdum nibh, at euismod velit fermentum a.
Integer libero urna, congue et laoreet in, euismod id felis. In hac habitasse platea dictumst. Morbi dictum felis ac arcu semper consequat laoreet odio auctor. Etiam nibh augue, mollis ut malesuada a, congue a odio. Pellentesque tincidunt luctus blandit. Ut libero metus, sollicitudin sit amet ultricies eu, rhoncus id est. Nulla eget nisl ac lorem malesuada ultricies. Duis tortor sem, vehicula sed rhoncus in, placerat non justo. Nullam leo nibh, commodo non eleifend sit amet, pellentesque volutpat mauris. Aliquam non mattis dolor. Nam tempor faucibus sapien. In porta lacinia ligula, a ullamcorper nulla iaculis a. In at tellus ligula. Vivamus elementum auctor ligula sit amet molestie. Morbi risus ipsum, ultricies sed egestas a, adipiscing ac leo.
Sed tellus urna, hendrerit at blandit ultrices, eleifend quis mi. Vivamus id ipsum nisi. Integer vulputate tortor et magna porttitor consectetur. Praesent diam purus, dignissim ac ornare sed, aliquam in orci. Morbi turpis elit, ullamcorper non pharetra vel, ultrices ut tellus. Etiam augue ipsum, mollis quis scelerisque et, sodales id mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec at quam mi, in elementum nibh. Etiam eu purus vel nisl pretium convallis et non sem. Integer venenatis, felis ut viverra dignissim, velit neque ultricies eros, id porttitor leo arcu vitae eros.
</div>
<div class="content">
<h2 id="b">B</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue nunc, laoreet at pharetra non, vulputate vitae libero. Pellentesque ultricies bibendum mi, quis pretium dui bibendum vitae. Vivamus eu cursus ante. Sed viverra diam ac est rhoncus semper. Mauris nisl tellus, lacinia id sollicitudin sit amet, mattis ut felis. Nulla eget dolor sit amet massa rhoncus porttitor. Sed rutrum dolor at turpis elementum sollicitudin pretium lectus porta. Donec vestibulum auctor mattis. Praesent lacinia bibendum luctus. Aenean consectetur, nibh sed interdum laoreet, magna erat accumsan felis, nec faucibus est lacus sed libero. Donec neque dui, suscipit eu luctus sed, fermentum quis leo. Suspendisse et nisi vel leo ultrices consequat.
Nulla auctor bibendum neque in posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus egestas pharetra sapien ut dignissim. Fusce non felis urna, quis sagittis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin tristique sagittis. Quisque elementum, orci in pharetra volutpat, velit urna iaculis metus, nec hendrerit ante mauris at diam. Sed elit arcu, imperdiet ut molestie eu, egestas quis purus. Duis nec turpis diam. Morbi sit amet mauris libero. Nam posuere fringilla vehicula. Ut dapibus congue justo, sit amet placerat dolor consectetur sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis in lorem eu quam tincidunt mollis. Sed eget tortor vitae magna porttitor lobortis id id nisl. Fusce mattis interdum nibh, at euismod velit fermentum a.
Integer libero urna, congue et laoreet in, euismod id felis. In hac habitasse platea dictumst. Morbi dictum felis ac arcu semper consequat laoreet odio auctor. Etiam nibh augue, mollis ut malesuada a, congue a odio. Pellentesque tincidunt luctus blandit. Ut libero metus, sollicitudin sit amet ultricies eu, rhoncus id est. Nulla eget nisl ac lorem malesuada ultricies. Duis tortor sem, vehicula sed rhoncus in, placerat non justo. Nullam leo nibh, commodo non eleifend sit amet, pellentesque volutpat mauris. Aliquam non mattis dolor. Nam tempor faucibus sapien. In porta lacinia ligula, a ullamcorper nulla iaculis a. In at tellus ligula. Vivamus elementum auctor ligula sit amet molestie. Morbi risus ipsum, ultricies sed egestas a, adipiscing ac leo.
Sed tellus urna, hendrerit at blandit ultrices, eleifend quis mi. Vivamus id ipsum nisi. Integer vulputate tortor et magna porttitor consectetur. Praesent diam purus, dignissim ac ornare sed, aliquam in orci. Morbi turpis elit, ullamcorper non pharetra vel, ultrices ut tellus. Etiam augue ipsum, mollis quis scelerisque et, sodales id mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec at quam mi, in elementum nibh. Etiam eu purus vel nisl pretium convallis et non sem. Integer venenatis, felis ut viverra dignissim, velit neque ultricies eros, id porttitor leo arcu vitae eros.
</div>
<div class="content">
<h2 id="c">C</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue nunc, laoreet at pharetra non, vulputate vitae libero. Pellentesque ultricies bibendum mi, quis pretium dui bibendum vitae. Vivamus eu cursus ante. Sed viverra diam ac est rhoncus semper. Mauris nisl tellus, lacinia id sollicitudin sit amet, mattis ut felis. Nulla eget dolor sit amet massa rhoncus porttitor. Sed rutrum dolor at turpis elementum sollicitudin pretium lectus porta. Donec vestibulum auctor mattis. Praesent lacinia bibendum luctus. Aenean consectetur, nibh sed interdum laoreet, magna erat accumsan felis, nec faucibus est lacus sed libero. Donec neque dui, suscipit eu luctus sed, fermentum quis leo. Suspendisse et nisi vel leo ultrices consequat.
Nulla auctor bibendum neque in posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus egestas pharetra sapien ut dignissim. Fusce non felis urna, quis sagittis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin tristique sagittis. Quisque elementum, orci in pharetra volutpat, velit urna iaculis metus, nec hendrerit ante mauris at diam. Sed elit arcu, imperdiet ut molestie eu, egestas quis purus. Duis nec turpis diam. Morbi sit amet mauris libero. Nam posuere fringilla vehicula. Ut dapibus congue justo, sit amet placerat dolor consectetur sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis in lorem eu quam tincidunt mollis. Sed eget tortor vitae magna porttitor lobortis id id nisl. Fusce mattis interdum nibh, at euismod velit fermentum a.
Integer libero urna, congue et laoreet in, euismod id felis. In hac habitasse platea dictumst. Morbi dictum felis ac arcu semper consequat laoreet odio auctor. Etiam nibh augue, mollis ut malesuada a, congue a odio. Pellentesque tincidunt luctus blandit. Ut libero metus, sollicitudin sit amet ultricies eu, rhoncus id est. Nulla eget nisl ac lorem malesuada ultricies. Duis tortor sem, vehicula sed rhoncus in, placerat non justo. Nullam leo nibh, commodo non eleifend sit amet, pellentesque volutpat mauris. Aliquam non mattis dolor. Nam tempor faucibus sapien. In porta lacinia ligula, a ullamcorper nulla iaculis a. In at tellus ligula. Vivamus elementum auctor ligula sit amet molestie. Morbi risus ipsum, ultricies sed egestas a, adipiscing ac leo.
Sed tellus urna, hendrerit at blandit ultrices, eleifend quis mi. Vivamus id ipsum nisi. Integer vulputate tortor et magna porttitor consectetur. Praesent diam purus, dignissim ac ornare sed, aliquam in orci. Morbi turpis elit, ullamcorper non pharetra vel, ultrices ut tellus. Etiam augue ipsum, mollis quis scelerisque et, sodales id mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec at quam mi, in elementum nibh. Etiam eu purus vel nisl pretium convallis et non sem. Integer venenatis, felis ut viverra dignissim, velit neque ultricies eros, id porttitor leo arcu vitae eros.
</div>
<div class="content">
<h2 id="d">D</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue nunc, laoreet at pharetra non, vulputate vitae libero. Pellentesque ultricies bibendum mi, quis pretium dui bibendum vitae. Vivamus eu cursus ante. Sed viverra diam ac est rhoncus semper. Mauris nisl tellus, lacinia id sollicitudin sit amet, mattis ut felis. Nulla eget dolor sit amet massa rhoncus porttitor. Sed rutrum dolor at turpis elementum sollicitudin pretium lectus porta. Donec vestibulum auctor mattis. Praesent lacinia bibendum luctus. Aenean consectetur, nibh sed interdum laoreet, magna erat accumsan felis, nec faucibus est lacus sed libero. Donec neque dui, suscipit eu luctus sed, fermentum quis leo. Suspendisse et nisi vel leo ultrices consequat.
Nulla auctor bibendum neque in posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus egestas pharetra sapien ut dignissim. Fusce non felis urna, quis sagittis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin tristique sagittis. Quisque elementum, orci in pharetra volutpat, velit urna iaculis metus, nec hendrerit ante mauris at diam. Sed elit arcu, imperdiet ut molestie eu, egestas quis purus. Duis nec turpis diam. Morbi sit amet mauris libero. Nam posuere fringilla vehicula. Ut dapibus congue justo, sit amet placerat dolor consectetur sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis in lorem eu quam tincidunt mollis. Sed eget tortor vitae magna porttitor lobortis id id nisl. Fusce mattis interdum nibh, at euismod velit fermentum a.
Integer libero urna, congue et laoreet in, euismod id felis. In hac habitasse platea dictumst. Morbi dictum felis ac arcu semper consequat laoreet odio auctor. Etiam nibh augue, mollis ut malesuada a, congue a odio. Pellentesque tincidunt luctus blandit. Ut libero metus, sollicitudin sit amet ultricies eu, rhoncus id est. Nulla eget nisl ac lorem malesuada ultricies. Duis tortor sem, vehicula sed rhoncus in, placerat non justo. Nullam leo nibh, commodo non eleifend sit amet, pellentesque volutpat mauris. Aliquam non mattis dolor. Nam tempor faucibus sapien. In porta lacinia ligula, a ullamcorper nulla iaculis a. In at tellus ligula. Vivamus elementum auctor ligula sit amet molestie. Morbi risus ipsum, ultricies sed egestas a, adipiscing ac leo.
Sed tellus urna, hendrerit at blandit ultrices, eleifend quis mi. Vivamus id ipsum nisi. Integer vulputate tortor et magna porttitor consectetur. Praesent diam purus, dignissim ac ornare sed, aliquam in orci. Morbi turpis elit, ullamcorper non pharetra vel, ultrices ut tellus. Etiam augue ipsum, mollis quis scelerisque et, sodales id mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec at quam mi, in elementum nibh. Etiam eu purus vel nisl pretium convallis et non sem. Integer venenatis, felis ut viverra dignissim, velit neque ultricies eros, id porttitor leo arcu vitae eros.
</div>
</body>
</html>
#links{
position:fixed;
z-index:2;
}
#links li{
cursor:pointer;
}
.content{
position:relative;
padding:20px;
left:100px;
width:300px;
background:#eee;
}
$('#links a').click(function( e ){
e.preventDefault();
var targetId = $(this).attr("href");
var top = $(targetId).offset().top;
$('html, body').stop().animate({scrollTop: top }, 1500);
});
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |