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版一样滚动。

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

        `<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>

平滑滚动不会平滑滚动

1 个答案: