//页面加载后干了3件事
$(document).ready(function(){
//1.首先将#goTopBtn隐藏
$("#goTopBtn").hide();
//2.给窗口添加事件：滚动时触发
$(window).scroll(function(){
//当滚动条的位置处于距顶部0像素以上时，返回顶部按钮出现，否则消失
if ($(window).scrollTop()>0){
$("#goTopBtn").fadeIn(1500);
}
else{
$("#goTopBtn").fadeOut(1500);
}
});
//3.当点击返回顶部按钮后，回到页面顶部位置
$("#goTopBtn").click(function(){
$('body,html').animate({scrollTop:0},1000);
});
});
BODY {
HEIGHT: 3600px;
}
#goTopBtn {
POSITION: fixed;
RIGHT: 20px;
BOTTOM: 35px;
}
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>jQuery版 弹性返回顶部</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/scrolltop.js" type="text/javascript"></script>
<link href="css/lrtk.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>
jQuery版 弹性返回顶部
</h1>
<div style="display: none;" id="goTopBtn">
<img src="images/lanren_top.jpg">
</div>
</body></html>
注：scrollTop([val])获取匹配元素相对滚动条顶部的偏移。
分享到：
相关推荐
jQuery实现返回顶部
当网页内容过多，导致页面过长时可以方便返回顶部
jquery实现返回顶部按钮demo，利用简单的jquery动画，易于学习
jQuery实现返回顶部和底部浮窗特效源码.zip
JavaScript/Jquery实现的返回顶部源代码，网上看到的，觉得不错就分享出来供大家一起共同分享学习。
返回顶部的jquery插件，可以方便用户快速回到顶部
当用户浏览很长的页面时，可以通过点击页面右下角的“返回顶部”按钮直达页面顶部，以方便用户进行下一步操作
很平滑的滚动 很不错的一个效果，当网页拉下的时候渐隐出现
很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现返回顶部按钮。 首先需要在顶部添加如下html元素： <p id=back-to-top><a><span></span>返回顶部</a></p> 其中a标签指向锚点top，可以在顶部防止一个<a>...
方法２、利用jQuery创建层，再对创建层相对定位出回顶部按钮的位置。 好处：回顶部按钮定位相对灵活；缺点：滚动时还是不够平滑。 方法３和方法４、回顶部位置都处在页面右下角，属绝对定位，不随分辨率变化而...
本文实例讲述了jQuery实现返回顶部效果的方法。分享给大家供大家参考。具体实现方法如下： 1、首先是CSS样式： /*updown*/ #shangxia{position:fixed;top:83%;right:42%;margin-right:-543px;display:block;_...
本文给大家带来的是使用javascript结合jQuery实现返回顶部的功能，并附上源码，送给大家，需要的童鞋直接拿走吧
主要介绍了基于jQuery实现返回顶部实例代码的相关资料,需要的朋友可以参考下
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。希望大家能够喜欢
jQuery实现一个动画版缓动返回顶部和底部的效果，里面附有demo，可以根据需求直接修改
实现返回顶部和底部的Jquery特效
主要介绍了jQuery实现返回顶部按钮和scroll滚动功能[带动画效果],需要的朋友可以参考下
jquery实现右侧显示分享类按钮及返回顶部按钮插件