1

我在单页网站上使用 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>

我正在使用位于以下位置的 Smoothscroll 插件：http ://css-tricks.com/snippets/jquery/smooth-scrolling/

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

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

4

1 回答 1

0

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

于 2012-10-03T16:35:01.937 回答