Question

When I press #download the #musicDownload div slides down and increases the height of the page. After that I would like to scroll down to the start of that div.
So far I have only managed to scroll down as far as the old page height allows.

This is the code I've got. (without the not working scroll)
Feel free to adjust the code too if there is a "better" way.

$(document).ready(function() {
$("#download").click(function() {
    $("#musicDownload").slideToggle(500);
    return false;
});

$("html").click(function(){
    $("#musicDownload").slideUp(500);
});

$("#musicDownload").click(function(event) {
    event.stopPropagation();
});
});
Was it helpful?

Solution

So I solved it by adding a callback function to the slideToggle that checks if the div is visible.
Like this:

$("#download").click(function() {
    $("#musicDownload").slideToggle(500, function(){
        if($("#musicDownload").is(":visible")){
            $("html, body").animate({scrollTop: $("#download").offset().top},500);
        }
    });
    return false;
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top