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

【问题标题】：jquery toggle and smooth scroll clashing on same pagejquery切换和平滑滚动在同一页面上发生冲突
【发布时间】：2012-10-05 00:40:25
【问题描述】：

我在单页网站上使用 jquery 切换插件和 Smoothscroll 插件。现在，问题是切换功能中的隐藏文本不允许平滑滚动 jquery 正常运行。假设我们在导航选项中单击“项目 a”，它应该以平滑的方式滚动到“项目 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>

                <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 幻灯片，但据我所知，这没有任何效果，因为我删除了它，没有任何改变。

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

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

【讨论】：