<!DOCTYPE html> <html> <head> <title>微网站返回顶部测试</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body> <div id="box" style="100%; height:2000px; border:1px solid #ccc;"> <input type="button" id="test" value="测试" /> </div> <!--返回顶部--> <div id="divTop" class="returntop" style="position:fixed; right:10px; bottom:90px; display:none; 40px; height: 40px; background-color:#ccc;"></div> <script src="jquery-1.11.1.js"></script> <script type="text/javascript"> $(function () { //返回顶部 $("#divTop").click(function () { $("body, html").animate({ scrollTop: 0 }, 0); $(this).hide(); }); //页面滚动时，“返回顶部”按钮 是否显示 $(window).scroll(function () { showBackToTop(); }); //页面resize时，“返回顶部”按钮 是否显示 $(window).resize(function () { showBackToTop(); }); //测试按钮单击事件 $("#test").click(function(){ $("#box").height(5000); }); }); //返回顶部 var globalScrollTop = $(document).height() - $(window).height(); //alert($(document).height() + " - " + $(window).height()); function showBackToTop() { if ($(window).scrollTop() > globalScrollTop) { $("#divTop").show(); } else { $("#divTop").hide(); } } </script> </body> </html>