jquery toggle and smooth scroll clashing on same page

Question

I am using jquery toggle plugin along with the smoothscroll plugin on a single page website. now, the problem is that the hidden text in the toggle function is not allowing the smoothscroll jquery to function properly. suppose we click 'item a' in the nav option and it is supposed to scroll to the 'item a' section div in a smooth manner, it does so haphazardly and also takes into account the height of the hidden text in toggle function which is about 100px. Hence, there is neither a smooth scroll but also a difference of 100px of the desired result.

For reference, i am using html5 and have 4 sections on the page, as provided in code below.

Here is the code for toggle function:

`$(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;
});
});`

here is the code for navigation menu (supposed to scroll on the same page):

<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>

i am using the smoothscroll plugin located at:http://css-tricks.com/snippets/jquery/smooth-scrolling/

can someone please guide me why these 2 jquery are clashing.

PS: i am also using a jquery slideshow, but that has no effect as far as i can tell, coz i removed that, and nothing changed.

Foreign Object Foreign Object · Accepted Answer · 2012-10-03T16:35:01

It's difficult to tell based on what you've posted, but using the .hide() method, which is comparable to setting the CSS property to display: none, could cause the browser to incorrectly calculate height. I would try setting visibility: hidden , and then when active visibility: visible.

jquery toggle and smooth scroll clashing on same page

1 Answers