返回顶部特效 click(), scroll();
2017-04-04 本文已影响0人
Yoyo_UoU
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();