简单几步实现返回顶部效果

今天与大家分享下网页中经常出现的返回顶部效果

相比原生Javascript，jquery实现起来能够省略不少代码。

接下来就直接贴代码啦：

$(function(){
$(window).scroll(function(){ //scroll--浏览器滚动条滚动式触发
var wHeight=$(window).height(); //获取浏览器可视窗口高度
var wTop=$(window).scrollTop(); //获取滚动条距离顶部高度
if(wTop>=wHeight) //当滚动条距离顶部高度超过一屏时执行
{
$("#btn").show(); //返回顶部按钮显示
}
else{
$("#btn").hide(); //返回顶部按钮隐藏
}
});
$("#btn").click(function(){
$("html,body").animate({scrollTop:0},500); //页面500毫秒返回顶部
});
});

 ok，是不是很简单，jquery直接为我们提供的animate方法可以很快实现返回顶部的动画效果。

以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

• javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
• jquery实现页面常用的返回顶部效果
• jQuery实现返回顶部功能
• 基于jQuery实现返回顶部实例代码
• jQuery实现的个性化返回底部与返回顶部特效代码
• jquery小火箭返回顶部代码分享
• jQuery实现返回顶部效果的方法
• js简单的点击返回顶部效果实现方法
• javascript实现博客园页面右下角返回顶部按钮
• 返回顶部按钮响应滚动且动态显示与隐藏
• jQuery实现返回顶部功能适合不支持js的浏览器