简单几步实现返回顶部效果
今天与大家分享下网页中经常出现的返回顶部效果
相比原生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方法可以很快实现返回顶部的动画效果。
以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持小牛知识库！
-
本文向大家介绍一句jQuery代码实现返回顶部效果（简单实用），包括了一句jQuery代码实现返回顶部效果（简单实用）的使用技巧和注意事项，需要的朋友参考一下 使用方法： 只需引用jQuery库和YesTop插件，然后一句代码就可以实现返回顶部： 引用代码： 使用代码： 也就是： $.fn.yestop(); 这句代码就可以了。 当然还有高级的设置，如换图片，设置图标为圆形，设置位置，设置时间等等
-
本文向大家介绍jQuery实现返回顶部效果的方法，包括了jQuery实现返回顶部效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现返回顶部效果的方法。分享给大家供大家参考。具体实现方法如下： 1、首先是CSS样式： 2、接着是jquery代码：（要引入jQuery核心库） 3、引用页面： 希望本文所述对大家的jQuery程序设计有所帮助。
-
本文向大家介绍javascript简单实现跟随滚动条漂浮的返回顶部按钮效果，包括了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果。分享给大家供大家参考，具体如下： 比较优秀的一款超过一屏高度才显示的，跟随滚动条漂浮的返回顶部按钮特效代码。 运行效果如下图所示： 完整实例
-
本文向大家介绍jQuery实现回到顶部效果，包括了jQuery实现回到顶部效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jQuery实现回到顶部效果的具体代码，供大家参考，具体内容如下 动画：通过点击侧栏导航，页面到达相应的位置 jQuery方法：show(), hide(), animate() 动画效果： 代码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家
-
本文向大家介绍jquery实现跳到底部，回到顶部效果的简单实例(类似锚)，包括了jquery实现跳到底部，回到顶部效果的简单实例(类似锚)的使用技巧和注意事项，需要的朋友参考一下 实例如下： 以上这篇jquery实现跳到底部，回到顶部效果的简单实例(类似锚)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍jquery实现页面常用的返回顶部效果，包括了jquery实现页面常用的返回顶部效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jquery实现返回顶部效果的全部代码，供大家参考，具体内容如下 效果图： 实现代码： 希望本文所述对大家学习javascript程序设计有所帮助。