jQuery中scrollTop获取匹配元素相对滚动条顶部的偏移（此方法对可见和隐藏元素均有效。）

最新推荐文章于 2021-05-27 19:30:25 发布

lnx0307

最新推荐文章于 2021-05-27 19:30:25 发布

阅读量2.6k

点赞数

分类专栏： jQuery特效文章标签： jquery scrollTop

本文链接：https://blog.csdn.net/lnx0307/article/details/39785211

版权

jQuery特效专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>webrx-title</title>
<script src="js/jquery-1.11.1.min.js"></script><style>
/*returnTop*/
p#back-to-top{
position:fixed;
display:none;
bottom:100px;
right:80px;
}
p#back-to-top a{
text-align:center;
text-decoration:none;
color:#d1d1d1;
display:block;
width:64px;
/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
-moz-transition:color 1s;
-webkit-transition:color 1s;
-o-transition:color 1s;
}
p#back-to-top a:hover{
color:#979797;
}
p#back-to-top a span{
background-image:url(top1.png);
border-radius:6px;
display:block;
height:64px;
width:56px;
margin-bottom:5px;
/*使用CSS3中的transition属性给标签背景颜色添加渐变效果*/
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
}
#back-to-top a:hover span{
background-image:url(top1.png);
}
</style>
<script>
$(document).ready(function(e) {
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){ //大于100行才出现跳转箭头
$("#back-to-top").fadeIn(1500); //大于1500行时跳转箭头慢慢透明显示
}
else
{
$("#back-to-top").fadeOut(1500); //大于1500行时跳转箭头慢慢透明消失
}
});

//当点击跳转链接后，回到页面顶部位置

$("#back-to-top").click(function(){
$('body,html').animate({scrollTop:0},1000);//1s完成回到顶部
return false;
});
});

});
</script>
</head>

<body>
aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 
aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 
aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 
aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 
aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 
aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 
aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 
aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 
aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 
aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 
aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 
<a href="#top">返回顶部</a>
</body>

</html>

如图拉动滚动条到最后点击返回顶部，1秒钟时间慢慢回到顶部且图标颜色慢慢变淡到透明

lnx0307

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery中scrollTop获取匹配元素相对滚动条顶部的偏移（此方法对可见和隐藏元素均有效。）

webrx-title/*returnTop*/ p#back-to-top{ position:fixed; display:none; bottom:100px; right:80px; } p#back-to-top a{ text-align:center; text-decora
复制链接

扫一扫