/ Published in: jQuery
Hides the button based on scroll position, fades in and out as necessary and upon click smoothly scrolls back to the top.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
$(document).ready(function() { // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function() { $(window).scroll(function() { if ($(this).scrollTop() > 100) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); // scroll body to 0px on click $('#back-top a').click(function() { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); });​ HTML USAGE: <p id="back-top" style="display: block; "> <a href="#top"><span></span><em>Back to top</em></a> </p>
URL: http://www.pixeltweaks.com