<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Back to top</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script> <style type="text/css"> .back-to-top { position: fixed; bottom: 50px; right: 150px; background:url(btn_top.png) no-repeat; display: none; height:49px; width:49px; cursor: pointer; } body{ height:1500px; } </style> </head> <body> <div id="back-to-top" class="back-to-top "></div> </body> </html> <script type="text/javascript"> $(document).ready(function () { $(window).scroll(function () { if ($(this).scrollTop() > 0) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); // scroll body to 0px on click $('#back-to-top').click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script>
另有jquery back to top plugin http://www.igloolab.com/back-to-top/