平滑滚动不起作用，仅在 Chrome 开发工具中切换设备后

Question

我有一个垂直导航栏，可以在手机上使用 .on(click, function) 和 .slideToggle() jQuery 方法打开和关闭，但在平板电脑和桌面上变成水平导航栏。导航栏包含定位同一页面内元素的锚元素。同时，我想添加一个带有 animate() 方法的 jQuery click() 函数，以在单击链接时创建平滑滚动。 这是我的问题。我在 JsBin 中编码，当我想在输出视图（默认桌面大小）中查看结果时，平滑滚动不起作用。然后我打开 Chrome 开发者工具并切换到设备工具栏中的移动视图，导航栏切换并且平滑滚动完美运行。切换回桌面大小，平滑滚动突然也可以正常工作了。关闭 Chrome 开发工具，平滑滚动完美运行。导致平滑滚动在第一次尝试时不起作用的问题可能是什么？

首先我尝试将这两个功能分开，这次导航栏无法在移动设备上打开，但平滑滚动在平板电脑和台式机上都可以正常工作。我第二次将 click() 和 animate() 函数嵌入到负责切换的 .on(click, function) 中，正如您在代码中看到的那样。我在 Chrome 和 Mozilla Firefox 中也遇到了同样的情况。

/* function to toggle the navigation bar
and make the scroll of links smooth */

function contentHide() {
  $('.toggle-button').on('click', function() {
    $('.nav').slideToggle(300);

    var $root = $('html, body');
    $('a').click(function() {
      $root.animate({
        scrollTop: $($.attr(this, 'href')).offset().top
      }, 900);
      return false;
    });

  });
}

$(document).ready(contentHide);

.nav {
  display: none;
}

@media (min-width: 768px) {

  .nav {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<navbar>
      <img class="logo" src="https://github.com/AnikoBorosova/Exercise-Flexbox-festival-website/blob/master/logo_placeholder.png?raw=true" alt="logo">
      <a class="toggle-button"><i class="fa fa-bars fa-2x" aria-hidden="true"></i></a>
      <div class="nav">
        <a href="#C1">Home</a>
        <a href="#C2">About us</a>
        <a href="#C3">Program</a>
        <a href="#C4">Partners</a>
        <a href="#C5">Contact</a>
      </div>
    </navbar>

这是我整个代码的 jsBin 链接：https://jsbin.com/zoximog/24/edit?html,css,js 提前致谢！

Answer 1

你可以用漂亮的滚动https://alvarotrigo.com/fullPage/ 它会帮助您软滚动到特定页面。