Question

我想要做的是，当在导航栏上点击“主页”时，它应滚动到页面顶部，但我似乎无法正常工作。我要让它在同一个.html上工作，所以我在同一页面上使用

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container text-center">
        <div id="navbar" class="navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#home">Home</a></li>
                <li><a href="#feedback">Feedback</a></li>
                <li><a href="#about">About me</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

<script>
    $("#home").on("click", function() {
        $("body").scrollTop(0);
    });
</script>

Answer 1

您可以在此处使用此代码。

您不能直接在jQuery中使用#home，因为它不是id。

所以你应该像$("a[href='#home']").on("click", function() {

一样使用它

希望这个例子可以帮助你。

$("a[href='#home']").on("click", function() {
    $('body').animate({
            scrollTop: 0
    },
    500); //this will helps you to smooth scroll to top
});

body {
height: 500px;
}
nav {
position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container text-center">
            <div id="navbar" class="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#feedback">Feedback</a></li>
                    <li><a href="#about">About me</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

Answer 2

是的，不幸的是，此代码无法运行，请尝试：

$("a[href='#home']").click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
});

祝福

Answer 3

我不认为body有滚动条。您需要在滚动条中找到div。只需右键单击滚动条并选择Inspec it

即可

导航栏链接滚动到顶部

3 个答案: