返回顶部特效 click(), scroll();
作者:
Yoyo_UoU | 来源:发表于
2017-04-04 14:56 被阅读0次
html
<a class="backTop"></a>
css
.backTop {
cursor: pointer;
position: fixed;
right: 50px;
top: -900px;
z-index: 6;
width: 70px;
height: 900px;
background: url(img/backTop.png);
}
jq
function cat() {
var backTop = $('.backTop');
$(window).scroll(function () {
// 获取滚动条位置
var scrollBar = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
// 如果滚动条大于680的时候 猫往下滑动,其他情况就隐藏
if (scrollBar >= 680){
backTop.stop().animate({top: '-270px'});
}else {
backTop.stop().animate({top: '-900px'});
}
});
// 点击 返回顶部
backTop.click(function () {
$('body,html').animate({scrollTop: 0}, 2000);
});
}
cat();
img
backTop.png
最终效果
本文标题:返回顶部特效 click(), scroll();
本文链接:https://www.haomeiwen.com/subject/kmoaottx.html
网友评论