javascript - 返回顶部按钮每次单击都会延长动画持续时间-6ren

javascript - 返回顶部按钮每次单击都会延长动画持续时间

转载作者：太空宇宙更新时间：2023-11-04 02:18:59

我构建了一个返回顶部按钮(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);
});

请看演示:https://jsfiddle.net/rshpqstf/3/

关于javascript - 返回顶部按钮每次单击都会延长动画持续时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38439559/