Question

我构建了一个回到顶部按钮（CSS动画，jQuery Waypoint插件，用于添加类和返回顶部脚本），这几乎正常工作。但是，当你每次点击都多次使用它时，它会以某种方式扩展动画过程，因此即使动画完成，窗口也会停留在最顶层。我不知道为什么会这样，我已经尝试了一些教程和jQuery片段来回到顶部按钮但没有成功。

有人可以看看我的小提琴，在那里你可以检查所描述的行为，给我进一步说明如何解决这个或为什么会发生这种情况？

小提琴：https://jsfiddle.net/rshpqstf/2/

的Javascript

<div *ngIf="selectedSet">  
        <ul class="collection">
            <li class="collection-item avatar" [ngClass]="{'done': isDone }" *ngFor='let set of newSetCollection;  #i = index; #last = last'>
                <img src="{{set.pic_left}}" alt="" class="circle">
                <div class="collection-content">
                    <span class="title">{{set.sets}} {{set.name}}</span>
                    <table>
                        <tr>
                            <th>Effected:</th>
                            <td><span> {{set.MainMuscleWorked}}</span> <!--span>, Middle Back, Triceps</span--></td>
                        </tr>
                        <tr>
                            <th>Use:</th>
                            <td><span>{{set.Equipment}}</span></td>
                        </tr>
                    </table>
                </div>
                <a href="#" class="secondary-content" (click)="isDone = !isDone;"><i class="material-icons">grade</i></a>
            </li>
        </ul>
    </div>

HTML

 /* 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%'
    });
});

CSS

<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>

Answer 1

当轮子滚动发生时，您可以将轮子事件处理程序添加到stop动画。

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/

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

1 个答案: