Question

以下是我的代码。我试图在点击提交按钮后滚动到new-products。但是，下面的脚本似乎不起作用。

<input type="submit" value="Get Ratings" class="main-search-submit" id="go">
    </div>
    <div id="new-products">

    </div>
    <script>
        $(document).ready(function(){  
      $(".main-search-submit").click(function() {
        $.scrollTo($("#new-products"), { duration: 0});
      });
    </script>
    <!-- Javascipt Libraries-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.11/jquery.scrollTo.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>

我的new-products课程的css用于测试目的：

#new-products {
    height: 2000px;

}

我做错了吗？

编辑：控制台显示 - ＆gt;

index.html:7 GET file://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css net::ERR_FILE_NOT_FOUND
index.html:9 GET file://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js net::ERR_FILE_NOT_FOUND
index.html:22 GET file://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js net::ERR_FILE_NOT_FOUND
index.html:23 GET file://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.11/jquery.scrollTo.min.js net::ERR_FILE_NOT_FOUND
index.html:24 GET file://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js net::ERR_FILE_NOT_FOUND
index.html:26 Uncaught ReferenceError: $ is not defined

UPD 1：在链接之前添加http:有助于消除控制台错误。但div仍然没有滚动。

Answer 1

你的脚本必须追求jQuery和插件，否则jQuery不可用（也不是插件）

<input type="submit" value="Get Ratings" class="main-search-submit" id="go">

<div id="new-products"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.11/jquery.scrollTo.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<script type="text/javascript">

      $(document).ready(function(){  
          $(".main-search-submit").click(function() {
              $.scrollTo($("#new-products"), { duration: 0});
          });
      });

</script>

另外，您忘了关闭document.ready功能！

Answer 2

DEMO

 $(document).ready(function(){  
    $(document).on('click',".main-search-submit",function() {
       $('body').animate({scrollTop : $("#new-products").offset().top}, 100);
    });
 });

scrollTo插件似乎并不能识别div

2 个答案: