Question

I have a div hidden and when a link is clicked it toggles the content to slide out. Unfortunately I cannot get it to scroll down to the Top of the div when it is shown at the very bottom of the page. I have accomplished this with regular javascript, but I want it done with Jquery instead.

Jquery:

// Toggle Terms
$('.toggleTerms').click(function(){
$('#displayTerms').slideToggle("slow", function(){
    if($('#displayTerms').is(":visible")){
        $('#displayTerms').animate({
            scrollTop: $('#displayTerms').position().top
        }, "slow"
    )}
});

});

Link:

<a href="javascript:void(0);" class="toggleTerms">Terms</a>

Content:

<div id="displayTerms" style="display:none; overflow:hidden;">The Terms</div>

Btw, it opens and closes just fine. Above is what I have so far.

Answer 1

Thanks Nick Simone for getting me closer. The Answer is;

// Toggle Terms
$('.toggleTerms').click(function(){
$('#displayTerms').slideToggle("slow", function(){
    if($('#displayTerms').is(":visible")){
        $("html, body").animate({scrollTop: $('#displayTerms').offset().top});
    }
});
});