2014-09-27 88 views
0

我试图让我的网站向下滚动,当我点击一个箭头。它可以在这里查看http://www.divisionforty.com/dbarr/jQuery滚动到不工作

但是,由于某种原因,点击上没有任何事情发生。它根本不起作用。我在其他div上尝试过,没有更好的运气。

<script> 
    $(function() { 
     $('a[href*=#]:not([href=#])').click(function() { 
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
       var target = $(this.hash); 
       target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
       if (target.length) { 
        $('html,body').animate({ 
         scrollTop: target.offset().top 
        }, 1000); 
        return false; 
       } 
      } 
     }); 
    }); 
</script> 

希望有人可以提供帮助。

感谢,
丹佛

+0

检查'target.length',快速测试在控制台中运行您的代码的几个链接返回'0'。设置一个断点并逐步完成代码 – charlietfl 2014-09-27 15:59:59

回答

1

那是因为你的#circlediva标签在视觉上不可见(有宽度和高度等于零)!

你必须做的是与a元素来包装#circlediv,如下:

<div class="upper">   
    <a href="#article"> 
     <div id="circlediv"> 
     </div> 
    </a> 
</div> 
+0

非常感谢您的帮助! – Denver 2014-09-27 16:17:51

+0

不客气;) – 2014-09-27 16:19:31

+0

HMM,它还是不想加载 – Denver 2014-09-27 16:20:00

0

我检查你的DOM元素并没有如UL或东西。 见这个例子中的DOM元素在这个例子中使用的名称SmoothPageScroll具有下面的结构,你必须做出这样的事情在您的网站:

<div id="page-wrap"> 

     <h1 id="top">Smooth Page Scrolling</h1> 
     ... 
     <ul> 
      <li><a href="/examples/SmoothPageScroll/#two">Scroll to Section Two</a></li> 
      <li><a href="#three">Scroll to Section Three</a></li> 
     </ul> 

     <h1 id="one">Section One</h1>  
     ... 
     <h1 id="two">Section Two</h1>   
     ... 
     <p><a href="#top">Top</a></p> 

    </div> 
0

我检查你的网页现在发现了这一点:

<a>标签内circlediv和它的大小是0x0像素,所以你不能点击它。

试试这个:

<a href="#article"> 
    <div id="circlediv"> 
    </div> 
</a> 

其次,你没有任何元素与id='article',所以它没有找到任何元素滚动到。