Question

我正在尝试向网页添加平滑滚动。当我点击关于，项目或与我联系链接时，我希望它自动滚动到其各自的部分。

但是只有在我按F12（开发人员工具）并单击以上链接后，它才能工作

这种行为让我很困惑。可能是什么问题？为什么不打开开发工具就无法正常工作？

下面是代码

index.html

function smoothScroll() {
  $('#about, #projects, #contact').click(function() {
    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top - 20
      },
      500
    );
    return false;
  });
}

$(smoothScroll);

<body>
  <header>
    <nav>
      <li><a href="#about">About Me</a></li>
      <li><a href="#projects">Portfolio</a></li>
      <li><a href="#contact">Contact Me</a></li>
    </nav>
  </header>

  <section class="portfolio">
    <div id="about">
      <h3>Full Stack Engineer</h3>
    </div>
    <div id="projects">
      <p>Some of the projects I have worked</p>
      <ul>
        <li>
          <h3>Gift Savvy</h3>
          <img src="" alt="Project 1" />
          <p>This is a full stack web application</p>
        </li>

        <li>
          <h3>Money Mapper</h3>
          <img src="" alt="Project 2" />
          <p>This is an expense tracking application</p>
        </li>
        <li>
          <h3>Nutrition tracker</h3>
          <img src="" alt="Project 3" />
          <p>This is a calorie tracking application</p>
        </li>
      </ul>
    </div>
    <div id="contact">
      <a href="">Linkedin</a>
      <a href="">GitHub</a>
      <a href="">Email</a>
    </div>
  </section>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 

</body>

为什么仅在F12之后才能使用平滑滚动

0 个答案: