一頁滾動導航無法使用Javascript嗎？

Question

是的，因此，我嘗試使用基本的javascript創建一個簡單的單頁滾動導航，以使其在使用功能滾動到該部分時動畫到1秒 。 問題是它不起作用。 有任何想法嗎？

HTML

            <ul class="header-nav">
            <li><a id="home" href="#home-View">Home</a></li>
            <li><a id="about" href="#about-View">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a id="contact" href="#contact-View">Contact</a></li>
        </ul>

Java腳本

    $(document).ready(function() {

    // add a click listener to each <a> tags
    setBindings();

});

function setBindings() {
    $(".header-nav a").click(function(e) {
        // prevent anchor tags for working (?)
        e.preventDefault();
        var sectionID = e.currentTarget.id + "Section";

        $("html body").animate({
            scrollTop: $("#" + sectionID).offset().top
        }, 1000)

        alert("sdf");
    })
}

Answer 1

嘗試使用此工作示例導航到element。

 $(document).ready(function() { // add a click listener to each <a> tags setBindings(); }); function setBindings() { $(".header-nav a").click(function(e) { // prevent anchor tags for working (?) e.preventDefault(); var sectionID = e.currentTarget.id + "Section"; console.log(sectionID); $("html body").animate({ scrollTop: $("#" + sectionID).offset().top }, 1000) alert("sdf"); }) } 

 #homeSection { height:200px; background-color:red; border:1px solid #DDD; } #aboutSection { height:200px; background-color:white; border:1px solid #DDD; } #blogSection { height:200px; background-color:blue; border:1px solid #DDD; } #contactSection { height:200px; background-color:#DDD; border:1px solid #DDD; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="header-nav"> <li><a id="home" href="#home-View">Home</a></li> <li><a id="about" href="#about-View">About</a></li> <li><a id="blog" href="#">Blog</a></li> <li><a id="contact" href="#contact-View">Contact</a></li> </ul> <div id="homeSection"></div> <div id="aboutSection"></div> <div id="blogSection"></div> <div id="contactSection"></div> 

Answer 2

您在標記中找不到根據jQuery代碼選擇的id ，這就是為什么它無法正常工作並出現錯誤的原因，請嘗試以下操作，

  $(document).ready(function() { // add a click listener to each <a> tags setBindings(); }); function setBindings() { $(".header-nav a").click(function(e) { // prevent anchor tags for working (?) e.preventDefault(); var sectionID = e.currentTarget.id + "-View"; console.log(sectionID); $("html,body").animate({ scrollTop: $("#" + sectionID).offset().top },1000); alert("sdf"); }) } 

 body { height: 1200px; } #home-View { margin-top: 50px; background: red; height: 200px; } #about-View { margin-top: 50px; background: red; height: 200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="header-nav"> <li><a id="home" href="#home-View">Home</a></li> <li><a id="about" href="#about-View">About</a></li> <li><a href="#">Blog</a></li> <li><a id="contact" href="#contact-View">Contact</a></li> </ul> <div id="home-View"></div> <div id="about-View"></div>