仅在Chrome Dev Tools中切换设备后，平滑滚动不起作用

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/，它可以帮助您软滚动到特定页面。