Question

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

首先我尝试将这两个功能分开，这次导航栏无法在手机上打开，但平滑滚动在平板电脑和桌面上运行良好。我第二次将click（）和animate（）函数嵌入到负责切换的.on（click，function）中，正如您在代码中看到的那样。我在Chrome和Mozilla Firefox中也遇到过相同的情况。

＆＃13;

/* 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);

＆＃13;

.nav {
  display: none;
}

@media (min-width: 768px) {

  .nav {
    display: block;
  }
}

＆＃13;

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

＆＃13;

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

Answer 1

您可以使用滚动https://alvarotrigo.com/fullPage/ 它将帮助您软滚动到特定页面。

仅在Chrome开发工具

1 个答案: