JS Bin

Add library

Add library
Run with JS
Save
Share
…

 
<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>JS Bin</title></head><body>    <div id="scroll">Scroll to see percentage</div>  <h1>My awesome webpage</h1>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>    <h2>I love headings</h2>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>    <h2>I love headings</h2>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>    <h2>I love headings</h2>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>    <h2>I love headings</h2>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae est quae sapiente vitae veniam soluta odio labore possimus recusandae. Dolorum nisi maxime explicabo est illo tenetur harum aspernatur! Veniam, quas.</p>
    
</body></html>

 
html,body {
padding:0;margin:0;border:0;}​#scroll {height:40px;position:fixed;    width:100%;    background:#fff;    bottom:0;    text-align:center;    color:red;}

 
document.addEventListener('scroll', function(){
​    var h = document.documentElement,         b = document.body,        st = 'scrollTop',        sh = 'scrollHeight';​    var percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;        document.getElementById('scroll').textContent = 'scrolled: ' + percent + '%';    });

Output Auto-run JS

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

Dismiss x

Keyboard Shortcuts

Shortcut	Action
ctrl + [num]	Toggle nth panel
Require alt key, leaving cmd+1, 2 etc for tab switching.
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.

public

Bin info

repletepro

21 Nov 2015

0viewers

JS Bin features

Pro features

Blog

Help

Donate to JS Bin ❤