Question

我在单页网站上使用jquery切换插件和smoothscroll插件。现在，问题是toggle函数中的隐藏文本不允许smoothscroll jquery正常运行。假设我们点击导航选项中的“项目a”，它应该以平滑的方式滚动到“项目a”部分div，它是偶然的，并且还考虑了切换功能中隐藏文本的高度，这是约100px。因此，既没有平滑的滚动，也没有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幻灯片，但据我所知，这没有任何效果，因为我删除了它，没有任何改变。

Answer 1

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

jquery切换和平滑滚动碰撞在同一页面上

1 个答案: