Question

我知道有很多关于构建jQuery滚动的链接和提示，我让它们在JS Fiddle中工作，但由于某种原因，当我在Visual Studio中使用它时它不起作用。我有一个单独的文件jQuery v1.7.2（我从网站上下载），一个名为script.js的javascript文件，其中包含此代码，用于滚动点击：

 $('a').click(function () {
     $('html, body').animate({
         scrollTop: $($(this).attr('href')).offset().top
     }, 3000);
     return false;
 });

我有一个固定的导航，当你点击链接页面滚动导航后面。实际的链接工作，因为我正在使用锚标签，但它并没有缓和和缓和。当你在jsfiddle http://jsfiddle.net/9SDLw/中使用类似的东西时，它可以工作，但是当我尝试在我的代码中使用它时它没有。这是我的代码：

      <div class="navigation">
      <ul id="navmenu">
          <li id="mainlogo"></li>
      </ul>
         <div class="mainnav">
              <ul id="actualnav">
                    <li>
                        <a href="#topbar" rel="">Home &nbsp;&nbsp;&nbsp;&nbsp;</a>
                    </li>
                    <li>
                        <a href="#aboutushome" rel="">About Us &nbsp;&nbsp;&nbsp;&nbsp;</a>
                    </li>
                    <li>
                        <a href="#productshome" rel="">Products</a>
                    </li>
                    <li>
                        <span class="resumatics">powered by resumatics</span>
                    </li>
              </ul>
         </div>
  </div>

到目前为止，我有2个id，当你点击“Home”链接时，它会转到页面的顶部，我为这个锚放置了这行代码：

    <div class="topbar" id="topbar"></div>

然后关于另一页下来我为第二个链接设置了另一个锚点，这里的“关于我们”链接：

     <div class="middlebar1" id="aboutushome"></div>

因此，当页面从一个点直接转到另一个点时链接确实起作用，但是向下放松页面和向上页面不起作用，它只是一个直接的镜头。我在这里缺少什么？

Answer 1

首先确保您在测试的页面中实际包含了文件（ jquery和您自己的脚本）。

然后在DOM准备就绪后调用您的代码（否则代码将找不到附加处理程序的链接，因为它尚未从文件中读取.. ）

所以

$(function(){ //this is the way to run your code at the DOM Ready event

    $('a').click(function () {
         $('html, body').animate({
             scrollTop: $($(this).attr('href')).offset().top
         }, 3000);
         return false;
     });

});

jQuery滚动无法正常工作

1 个答案: