我构建了一个返回顶部按钮(CSS 动画、用于添加类的 jQuery Waypoint 插件和返回顶部脚本)，这几乎可以正常工作。但是，当您在每次新点击时多次使用它时，它会以某种方式延长动画过程，因此即使动画应该完成，窗口也会卡在最上面。我不知道为什么会这样，我已经尝试了一些教程和 jQuery 代码片段来返回顶部按钮，但没有成功。
有人可以看看我的 fiddle 吗，您可以在其中检查所描述的行为，以进一步说明如何解决此问题或为什么会发生这种情况？
fiddle :https://jsfiddle.net/rshpqstf/2/
Javascript
/* Bottom Bar Behaviour */
jQuery(document).ready(function($) {
var waypoints = jQuery('.footer').waypoint({
handler: function(direction) {
jQuery('.frame-bottom_down span').toggleClass('test', direction === 'down');
jQuery('.frame-bottom_up span').toggleClass('test2', direction ==='down');
jQuery('.js-frame-bottom, .frame-bottom_ttl').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, 700);
return false;
})
},
offset: '100%'
});
});
HTML
<body>
<div class="main-placeholder"></div>
<div class="footer"></div>
<div class="frame-bottom" style="transform: matrix(1, 0, 0, 1, 0, 0);">
<a href="javascript:void(0)" class="js-frame-bottom frame-bottom_ttl">
<p class="frame-bottom_down">
<span>S</span><span>C</span><span>R</span><span>O</span><span>L</span><span>L</span>
<span>D</span><span>O</span><span>W</span><span>N</span>
</p>
<p class="frame-bottom_up">
<span>P</span><span>A</span><span>G</span><span>E</span>
<span>U</span><span>P</span>
</p>
</a>
</div>
</body>
CSS
body {
background: #fff;
}
.main-placeholder {
height:2000px;
width: 100%;
}
.frame-bottom {
z-index: 2000;
height: 50px;
position: fixed;
width: 100%;
left: 0;
bottom: 0;
text-align: center;
color: #979797;
background-color: #333;
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
font-size: 16px;
letter-spacing: .05em;
line-height: 3.3;
}
.frame-bottom_ttl {
display: block;
position: relative;
cursor: default;
}
.frame-bottom_up, .frame-bottom_down {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
.frame-bottom_down span, .frame-bottom_up span {
display: inline-block;
color: #fff;
vertical-align: bottom;
transition: all .2s ease-in;
}
.frame-bottom_down span {
opacity: 1;
transform: matrix(1, 0, 0, 1, 0, 0);
}
.frame-bottom_down span.test {
opacity: 0;
transform: matrix(1, 0, 0, 1, 0, 5);
}
.frame-bottom_up span {
transform: matrix(1, 0, 0, 1, 0, 5);
opacity: 0;
visibility: hidden;
}
.frame-bottom_up span.test2 {
opacity: 1;
transform: matrix(1, 0, 0, 1, 0, 0);
cursor: pointer;
visibility: visible;
}
.frame-bottom_down span.test:nth-child(1) { transition-delay: 0s; }
.frame-bottom_down span.test:nth-child(2) { transition-delay: 0.02s;}
.frame-bottom_down span.test:nth-child(3) { transition-delay: 0.04s; }
.frame-bottom_down span.test:nth-child(4) { transition-delay: 0.06s; }
.frame-bottom_down span.test:nth-child(5) { transition-delay: 0.08s; }
.frame-bottom_down span.test:nth-child(6) { transition-delay: 0.1s; }
.frame-bottom_down span.test:nth-child(7) { transition-delay: 0.12s; }
.frame-bottom_down span.test:nth-child(8) { transition-delay: 0.14s; }
.frame-bottom_down span.test:nth-child(9) { transition-delay: 0.16s; }
.frame-bottom_down span.test:nth-child(10) { transition-delay: 0.18s; }
.frame-bottom_up span.test2:nth-child(1) { transition-delay: .2s; }
.frame-bottom_up span.test2:nth-child(2) { transition-delay: 0.22s; }
.frame-bottom_up span.test2:nth-child(3) { transition-delay: 0.24s; }
.frame-bottom_up span.test2:nth-child(4) { transition-delay: 0.26s; }
.frame-bottom_up span.test2:nth-child(5) { transition-delay: 0.28s; }
.frame-bottom_up span.test2:nth-child(6) { transition-delay: .3s; }
.frame-bottom_down span:nth-child(1) { transition-delay: 0.12s; }
.frame-bottom_down span:nth-child(2) { transition-delay: 0.14s; }
.frame-bottom_down span:nth-child(3) { transition-delay: 0.16s; }
.frame-bottom_down span:nth-child(4) { transition-delay: 0.18s; }
.frame-bottom_down span:nth-child(5) { transition-delay: .2s; }
.frame-bottom_down span:nth-child(6) { transition-delay: .22s; }
.frame-bottom_down span:nth-child(7) { transition-delay: 0.24s; }
.frame-bottom_down span:nth-child(8) { transition-delay: 0.26s; }
.frame-bottom_down span:nth-child(9) { transition-delay: 0.28s; }
.frame-bottom_down span:nth-child(10) { transition-delay: .3s; }
.frame-bottom_up span:nth-child(1) { transition-delay: 0s; }
.frame-bottom_up span:nth-child(2) { transition-delay: 0.02s; }
.frame-bottom_up span:nth-child(3) { transition-delay: 0.04s; }
.frame-bottom_up span:nth-child(4) { transition-delay: 0.06s; }
.frame-bottom_up span:nth-child(5) { transition-delay: 0.08s; }
.frame-bottom_up span:nth-child(6) { transition-delay: 0.1s; }
最佳答案
您可以添加滚轮事件处理程序以在发生滚轮滚动时停止动画。
jQuery('.main-placeholder').on('mousewheel', function(event) {
//console.log(event.deltaX, event.deltaY, event.deltaFactor);
console.log(event);
jQuery('html, body').stop(true);
});
关于javascript - 返回顶部按钮每次单击都会延长动画持续时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38439559/