//页面加载后干了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>...
方法2、利用jQuery创建层,再对创建层相对定位出回顶部按钮的位置。 好处:回顶部按钮定位相对灵活;缺点:滚动时还是不够平滑。 方法3和方法4、回顶部位置都处在页面右下角,属绝对定位,不随分辨率变化而...
本文实例讲述了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实现右侧显示分享类按钮及返回顶部按钮插件