I have a simple 'tab' effect jQuery slideToggle, where the user clicks a heading .expander-headingand the next() div .expander-content, expands. I am sadly having some trouble offsetting/scrolling to the top of this .expander-content div on click, however.
$(".expander-heading").click(function () { $header = $(this); //getting the next element $content = $header.next(); //open up or close $content.slideToggle(325); $(".site-container").animate({ scrollTop: $content.offset().top }, "fast"); });With an HTML structure like so:
<div class="expander-heading d-block u-pointer"> <h2>Title</h2> </div> <div class="expander-content d-none"> <p>Tabbed content</p> </div>In the above, I get the next item in the structure using $content, my on click function works fine, finding the next element in the page, but how come here on .animate(), $content can't be scrolled to the top of?
I use .site-containerrather than html,body because my main body div sits inside of its own div, where the body overflow is hidden.