javascript - jquery 切换和平滑滚动在同一页面上发生冲突

Question

我在单页网站上使用 jquery 切换插件和 smoothscroll 插件。现在，问题是切换功能中的隐藏文本不允许 smoothscroll jquery 正常运行。假设我们点击导航选项中的“item a”，它应该以平滑的方式滚动到“item a”部分 div，它这样做是随意的，并且还考虑了切换功能中隐藏文本的高度，即大约100像素。因此，不仅没有平滑的滚动，而且与期望的结果有 100px 的差异。

仅供引用，我使用的是 html5，页面上有 4 个部分，如下面的代码所示。

这里是切换功能的代码:

`$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).toggleClass("active").next(".togglebox").slideToggle("slow");
return true;
});
});`

这是导航菜单的代码(应该在同一页面上滚动):

<nav>
      <ul>
                <li><a href="#main">Home</a></li><br/>
                <li><a href="#work">Our Works</a></li>
                <li><a href="#about-us">About Us</a></li>
                <li><a href="#contact">Contact Us</a></li>
            </ul>
        </nav>

我正在使用位于: http://css-tricks.com/snippets/jquery/smooth-scrolling/ 的 smoothscroll 插件

有人可以指导我为什么这两个 jquery 会发生冲突吗？

PS:我也在使用 jquery 幻灯片，但据我所知，这没有任何效果，因为我删除了它，并且没有任何改变。

Answer 1

根据您发布的内容很难判断，但使用 .hide() 方法，这相当于将 CSS 属性设置为 display: none ，可能会导致浏览器错误地计算高度。我会尝试设置 visibility:hidden ，然后在事件时设置 visibility:visible。