jQuery实现网站顶部返回的多种方法总结
jQuery提供了多种方法来返回网站顶部。其中一种方法是使用`animate()`函数，它允许您在指定的时间内平滑地滚动到目标位置。例如，您可以使用以下代码将页面滚动到顶部： ```javascript $("html, body").animate({ scrollTop: 0 }, "slow"); ``` 另一种方法是使用`scrollTop()`函数，它返回文档相对于其滚动区的顶部的距离。您可以使用以下代码将页面滚动到该位置： ```javascript $("html, body").scrollTop(0); ```
1、基础版，只带返回顶部功能
<!doctypehtml><html><head><metacharset="UTF-8"><title>返回顶部</title><scriptsrc="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><styletype="text/css">.container{width:980px;margin:0auto;height:auto;min-height:100%;position:relative;}.content{height:2000px;border:1pxsolidred;}#goToTop{position:fixed;bottom:20px;right:10%;}#goToTopa{background:nonerepeatscroll00#336699;border:1pxsolid#CCCCCC;border-radius:3px;-webkit-border-radius:3px;color:#FF9966;font-size:14px;padding:5px;text-decoration:none;text-shadow:01px0#999;-webkit-text-shadow:01px0#999;}</style></head><body><div><div>我是头部</div><div>我是主内容，高度是2000px</div><div>我是在最底部</div><divid="goToTop"><ahref="javascript:;">点我回到页面顶部</a></div></div><script>//原始版$(function(){$('#goToTopa').click(function(){$('html,body').animate({scrollTop:0},'slow');});});</script></body></html>2、基础升级版，默认不显示，滚动到一定距离显示
<!doctypehtml><html><head><metacharset="UTF-8"><title>返回顶部</title><scriptsrc="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><styletype="text/css">.container{width:980px;margin:0auto;height:auto;min-height:100%;position:relative;}.content{height:2000px;border:1pxsolidred;}#goToTop{position:fixed;bottom:20px;right:10%;}#goToTopa{background:nonerepeatscroll00#336699;border:1pxsolid#CCCCCC;border-radius:3px;-webkit-border-radius:3px;color:#ff0;font-size:14px;padding:5px;text-decoration:none;text-shadow:01px0#999;-webkit-text-shadow:01px0#999;}</style></head><body><div><div>我是头部</div><div>我是主内容，高度是2000px</div><div>我是在最底部</div><divid="goToTop"><ahref="javascript:;">点我返回顶部</a></div></div><script>//改进版$(function(){$('#goToTop').hide();//隐藏gototop按钮$(window).scroll(function(){//console.log($(this).scrollTop());//当window的scrolltop距离大于1时，gotoif($(this).scrollTop()>100){$('#goToTop').fadeIn();}else{$('#goToTop').fadeOut();}});$('#goToTopa').click(function(){$('html,body').animate({scrollTop:0},300);returnfalse;});});</script></body></html>3、兼容性版，加强浏览器兼容性
<!doctypehtml><html><head><metacharset="UTF-8"><title>返回顶部</title><scriptsrc="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><styletype="text/css">.container{width:980px;margin:0auto;height:auto;min-height:100%;position:relative;}.content{height:2000px;border:1pxsolidred;}#goToTop{position:absolute;right:-130px;z-index:9000;}#goToTopa{background:nonerepeatscroll00#336699;border:1pxsolid#CCCCCC;border-radius:3px;-webkit-border-radius:3px;color:#ff0;font-size:14px;padding:5px;text-decoration:none;text-shadow:01px0#999;-webkit-text-shadow:01px0#999;}</style></head><body><div><div>我是头部</div><div>我是主内容，高度是2000px</div><div>我是在最底部</div></div><script>//加强版（兼容性基本完好）$(function(){//goToTop距浏览器顶端的距离，这个距离可以根据你的需求修改vartopDistance=500;//距离浏览器顶端多少距离开始显示goToTop按钮，这个距离也可以修改，但不能超过浏览器默认高度，为了兼容不同分辨率的浏览器，我建议在这里设置值为1；varshowDistance=1;//定义一个变量，方便后面加入在html元素标签中插入这个goToTop按钮的标签vargoToTopButton=$('<divid="goToTop"><ahref="javascript:;">点我回到页面顶部</a></div>');varthisTop=$(window).scrollTop()+topDistance;//在container的div里插入我们前面定义好的html标签元素$('.container').append(goToTopButton);//设置goToTop按钮top的css属性和属性值$('#goToTop').css('top',thisTop);if($(window).scrollTop()<showDistance){$('#goToTop').hide();}//给窗口绑定一个滚动事件，当窗口滚动条滚动时执行$(window).scroll(function(){//console.log($(this).scrollTop());thisTop=$(this).scrollTop()+topDistance;//获取当前window向上滚动的距离$('#goToTop').css('top',thisTop);//修改goToTop按钮的top距离console.log(thisTop);if($(this).scrollTop()>showDistance){$('#goToTop').fadeIn();}else{$('#goToTop').fadeOut();}});//给按钮绑定一个click事件，点击按钮时，返回顶部$('#goToTopa').click(function(){$('html,body').animate({scrollTop:0},300);returnfalse;});});</script></body></html>4、小型插件版
<!doctypehtml><html><head><metacharset="UTF-8"><title>返回顶部</title><scriptsrc="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><styletype="text/css">.container{width:980px;margin:0auto;height:auto;min-height:100%;position:relative;}.content{height:2000px;border:1pxsolidred;}#goToTop{position:fixed;bottom:20px;right:10%;}#goToTopa{background:nonerepeatscroll00#336699;border:1pxsolid#CCCCCC;border-radius:3px;-webkit-border-radius:3px;color:#FF9966;font-size:14px;padding:5px;text-decoration:none;text-shadow:01px0#999;-webkit-text-shadow:01px0#999;}</style></head><body><div><div>我是头部</div><div>我是主内容，高度是2000px</div><div>我是在最底部</div><divid="goToTop"><ahref="javascript:;">点我回到页面顶部</a></div></div><script>//编写jQuery返回顶部插件jQuery.fn.goToTop=function(){//判断如果窗口滚动距离小于0，隐藏按钮if($(window).scrollTop()<0){$('#goToTop').hide();}//窗口滚动时，判断当前窗口滚动距离$(window).scroll(function(){if($(this).scrollTop()>1){$('#goToTop').fadeIn();}else{$('#goToTop').fadeOut();}});//给这个按钮绑定一个click事件this.bind('click',function(){$('html,body').animate({scrollTop:0},500);returnfalse;});};//调用这个插件$(function(){$('#goToTop').goToTop();});</script></body></html>
