就是常见网页里滚动到一定高度,出现返回顶部按钮,触发事件按钮再消失。animate巨坑。
html
<div class="J_goTop"><img src="../res/static/img/totop.png" alt=""></div>
js
<script>
$(document).scroll(function() {
var scroH = $(document).scrollTop(); //滚动高度
if (scroH >= 100) { // 显示
$('.J_goTop').css("display", "block") // $('.J_goTop').fadeIn();
} else{ // 消失
$('.J_goTop').removeAttr("style") // $('.J_goTop').fadeOut();
}
// 点击事件
$('.J_goTop').click(function(){
if(scroH!=0){// 判断好像无效 :)
// 巨坑!!!执行animate前先结束这个循环动作
$('body,html').stop().animate({}).animate({ // document,window对象不能执行animate
scrollTop: '0px',
}, 600);
return false;
}
})
});
</script>
css
/* 回到顶部 */
.J_goTop{
position: fixed;
bottom: 10%;
right: 1%;
cursor: pointer;
width: 2.5rem;
height: 2.5rem;
display: none;
}
.J_goTop img{width: 100%;height: 100%}
ps:一直以为是样式未及时清除…然后发现jq中animate动画第二次点击事件没反应。
原因:第一次触发后就一直在重复执行scroll=0的操作,导致无法进行第二次,也就是再次下拉会卡顿闪烁。
解决:执行animate前,先结束这个上一次动作,再执行操作。
$('body,html').stop().animate({'为空或具体操作'}).animate({
scrollTop: '0px',
}, 600);
借鉴:https://zhidao.baidu.com/question/542439686.html