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>

的Javascript

    $(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

尝试使用此工作示例导航到元素。

$(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

您根据id代码选择的

jQuery无法在标记中找到，这就是为什么它无法正常工作并控制错误，请尝试以下操作，

  $(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>

单页滚动导航无法使用Javascript？

2 个答案: