javascript - 奇怪地滚动到jQuery函数

Question

我有一个 jQuery 平滑滚动脚本：

$(".scroll").click(function(event){
     event.preventDefault();
     var dest=0;
     if($(this.hash).offset().top > $(document).height()-$(window).height()){
          dest=$(document).height()-$(window).height();
     }else{
          dest=$(this.hash).offset().top;
     }
     $('html,body').animate({scrollTop:dest}, 500,'swing');
 });

它可以很好地滚动到

<a id="info"></a>

但不适用于我的任何其他人

<a id="top"></a>
<a id="bottom"></a>
<a id="announcements"></a>
etc ...

手动添加 domain.com/#top 时它可以工作，所以锚应该没问题。

有谁知道为什么？

实时预览： http ://thehtmlworkshop.com/

Answer 1

您的按钮 top 和 down 没有类scroll。尝试添加它。

<a href="top" class="scroll" /><!-- img --></a>

然后可以肯定的是，a将触发事件：

$("a.scroll").click(function(event){
    //your code there
});

Answer 2

问题是您将单击设置为“滚动”类。点击事件需要设置为父级。

$(".scroll").parent().click(function(event){
     event.preventDefault();
     var dest=0;
     if($(this.hash).offset().top > $(document).height()-$(window).height()){
          dest=$(document).height()-$(window).height();
     }else{
          dest=$(this.hash).offset().top;
     }
     $('html,body').animate({scrollTop:dest}, 500,'swing');
});

Answer 3

这是一个 jsfiddle：这行得通。

jQuery：

$(".scroll").click(function(event){

var target = $(this).hash;
 var dest=null;
 if(($(this.hash).offset().top) > ($(document).height()-$(window).height())){
      dest= $(document).height()-$(window).height();
 }else{
      dest=$(this.hash).offset().top;
 }

$('html,body').animate({scrollTop:dest}, 1000, 'swing');
 event.preventDefault();

});