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

您的按钮上下都没有课程scroll。尝试添加它。

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

然后确定a会触发事件：

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

Answer 2

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

$(".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：This works。

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();

}）;

滚动到jQuery函数很奇怪

3 个答案: