JQ－如何优雅的回到顶部。
2016-08-03 本文已影响0人
Asterwen
今天业务 需求中 增加一个回到顶部的小组件。那我们直接进入正题。
1.最快的 方法就是在页面顶部加一个a 标签，使用锚点直接跳转到顶部。这样写的缺点是没有很好的页面体验效果，页面会直接切到顶部。
/* 写在页面顶部的a标签，由于里面没有文本元素，所以不占用布局空间*/
<a name="Top"></a>
/* 跳转按钮部分*/
<a href="#Top">回到顶部</a>
2.第二种是 使用 插件scrollToTop 插件。看了下插件，感觉很麻烦，可能是它有处理兼容相关的问题。不过还是不太建议使用。
3.好东西都是放到最后的，这是最后投入实际使用的一个方法。
/* html 部分,可以加在页面的 任何独立部分 */
<div class="backTop">
回到顶部
</div>
/* css 样式部分*/
div.backTop{
width:40px;
height:40px;
border:1px solid #bbb;
cursor:pointer;
}
/* js 部分*/
$(function(){
$(window).scroll(function(){
if($(window).scrollTop()>600){
$("div.backTop").fadeIn(1500);
}else{
$("div.backTop).fadeOut(1500);
}
});
$("div.backTop").click(function(){
$("body.html").animate({scrollTop:0},500);
return false;
})
})
