javascript - 滚动到 JavaScript

Question

这就是我的顶部导航栏。我将其与 jquery 一起使用

        <nav>
            <div class="brand">BRAND</div>
            <ul>
                <li><a id="home" href="#home">Home</a></li>
                <li><a id="about" href="#about">About</a></li>
                <li><a id="buy" href="#buy">Buy</a></li>
                <li><a id="contact" href="#contact">Contact</a></li>
                <li><a id="login" class="active" href="#">Log In</a></li>
            </ul>
        </nav>

并且我尝试使用这行代码在单击导航栏上的选项之一滚动到该元素时获得它

        $("nav a").on("click", function(e) {
            e.preventDefault();
            var section = $(this).attr("href");
            $("html, body").animate({
                scrollTop: $(section).offset().top
            }, 850);
        });     

但它不起作用？

Answer 1

您必须将 id 放入要滚动到的元素而不是链接本身

        $("nav a").on("click", function(e) {
            e.preventDefault();
            var section = $(this).attr("href");
            $("html, body").animate({
                scrollTop: $(section).offset().top
            }, 850);
        });     

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
            <div class="brand">BRAND</div>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a  href="#about">About</a></li>
                <li><a  href="#buy">Buy</a></li>
                <li><a  href="#contact">Contact</a></li>
                <li><a  class="active" href="#">Log In</a></li>
            </ul>
        </nav>
        
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <div id="home">
        example
        </div>