JQ－如何优雅的回到顶部。

今天业务 需求中 增加一个回到顶部的小组件。那我们直接进入正题。

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;

})

})