$("#back-top").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); $('#back-top a').click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); });
body{height:2000px;} #back-top { position: fixed; bottom: 30px; margin-left: 150px; } #back-top a { width: 108px; height: 108px; display: block; text-align: center; text-decoration: none; color: #666; background:#eee; } #back-top a:hover { color: #000; }
content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> content<br /> <p id="back-top"> <a href="#top">Back to Top</a> </p>