平滑滚动不会平滑滚动

Question

我已经阅读了大量关于平滑滚动的主题，但我无法让它们工作。 我想在“js/script.js”文件夹文件中编写代码，并将“script.js”链接复制到主页的底部。 我是否必须编写脚本以在主 index.html 中平滑滚动？ 我想保持该页面尽可能干净简洁，因此外包。

$('a[href^="#"]').on('click', function(event) {
var target = $(this.href);
if( target.length ) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: target.offset().top
    }, 700);
}
});

不管是这个还是我在网上找到的任何其他很棒的滚动代码，我的测试页面仍然像 Windows 98 PC 版本一样滚动。

我相信每个href都有正确定义的class ，如下所示：

        `<ul class="nav navbar-nav">
            <li class="nav-item">
                <a href="#page-top">Home</a>
            </li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a href="#about">About us</a>
            </li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a href="#contact">Contact</a>
            </li>
        </ul>`

你能帮我吗？

PS：是 JS = jQuery 吗？

Answer 1

尝试为这样的动作定义一个类

$(document).ready(function(){
    $('.yourClass').on('click', function(event) {
        ...
    }
)};

在你的 HTML 中：

 <ul class="nav navbar-nav">
     <li class="nav-item">
       <a class="yourClass" href="#contact">Contact</a>
     </li>
 </ul>

此外，jQuery 是一个扩展 JavaScript 的库。 所以请确保您在 index.html 中包含了最新的 jQuery

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>