Javascript 只有在Chrome开发工具中切换设备后，平滑滚动才起作用

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

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

/*用于切换导航栏的函数
并使链接滚动平滑*/
函数contentHide（）{
$（'.toggle button'）。打开（'单击'，函数（）{
$（'.nav'）。滑动切换（300）；
var$root=$（'html，body'）；
$（'a'）。单击（函数（）{
$root.animate({
scrollTop:$（$.attr（此'href'））.offset（）.top
}, 900);
返回false；
});
});
}
$（文档）.ready（contentHide）
.nav{
显示：无；
}
@介质（最小宽度：768px）{
.导航{
显示：块；
}
}
您可以使用
它将帮助您软滚动到特定页面。
您可以使用它来轻松滚动
它将帮助您软滚动到特定页面