Question

我尝试在每个具有.smoothScroll类的按钮上添加smoothScroll动画。

所以我这样做了：

// SmoothSCroll
var smoothScroll = document.querySelectorAll('.smoothScroll');
[].forEach.call(smoothScroll, function (el) {
  el.addEventListener('click', function() {
        var offset = $(this.hash).offset().top;
        $('html, body').stop().animate({
            scrollTop: offset - (window.innerHeight/2) + ($(this.hash).innerHeight()/2)   
        }, 400 ); 
        return false;
  });
});

https://jsfiddle.net/jt2jo3pt/2/

我不知道你是否注意到发生了什么，但是当点击触发时有一点闪光（滚动条在平滑滚动之前会下降一点）

但是当我尝试使用这样的完整Jquery时：

$('.smoothScroll').click(function(e){
        var offset = $(this.hash).offset().top;
        $('html, body').stop().animate({
            scrollTop: offset - (window.innerHeight/2) + ($(this.hash).innerHeight()/2)   
        }, 400 ); 
    return false;
});

我没有这种冒泡效果：https://jsfiddle.net/34w72v1v/

您是否知道querySelectorAll方法可能导致此问题的原因？

我尝试不使用jQuery，所以我需要知道要学习的内容：）

感谢您的时间。

Answer 1

你需要在javascript中使用preventDefault（）来阻止窗口移动到书签锚点：

// SmoothSCroll
var smoothScroll = document.querySelectorAll('.smoothScroll');
[].forEach.call(smoothScroll, function (el) {
  el.addEventListener('click', function(el) {
      el.preventDefault();
        var offset = $(this.hash).offset().top;
        $('html, body').stop().animate({
            scrollTop: offset - (window.innerHeight/2) + ($(this.hash).innerHeight()/2)   
        }, 400 ); 
  });
});

return false只是用于触发e.preventDefault()和e.stopPropagation()的jQuery事件的快捷方式。

https://jsfiddle.net/TrueBlueAussie/jt2jo3pt/4/

Answer 2

这是因为return false。在jQuery中，从事件处理程序返回false可防止发生默认行为。在（non-inline）JavaScript事件处理程序中，它什么都不做。有关详细信息，请参阅this excellent answer。

由于您的触发器是<a href="#test" class="smoothScroll">Go to test</a>，因此在单击它时，非jQuery版本会将您带到#test元素，但在jQuery中它不会（因为默认行为被取消））...因此闪光。

如果您在jQuery中没有返回false，或者在JavaScript版本中添加e.preventDefault()，您会发现可以控制闪存。

https://jsfiddle.net/34w72v1v/1/
https://jsfiddle.net/jt2jo3pt/3/

点击监听器与jQuery和Javascript之间的区别

2 个答案: