JQuery slideTo after slideToogle has completed

Question

i have this jquery code which successfully uses slideToggle to open and close a div below.

$('#map-wrap').slideUp("fast");
$('#get-here-btn').click(function() {
    if (!$("#map-wrap").is(":visible"))
    $('#get-here-btn').addClass("active").html('Close');

    $("#map-wrap").slideToggle("fast","linear",function() { 
    if (!$("#map-wrap").is(":visible"))
        $('#get-here-btn').removeClass("active").html('How to get here');
       });       
});

i'd like to scrollTo the now-open div once it's open (with some sort of easing). i've tried a few variations and i can only get it to jump to the location (is this because the element is hidden when the button is clicked?) rather than slide.

i know i should probably add the scrollTo into the slideToggle function but am not sure where?

any help much appreciated. thanks in advance, Leon

i've knocked up a JSFiddle: http://jsfiddle.net/leonharris/rZqwx

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

Taken from this question:

Assuming you have a button with the id 'button', try this example:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

Obviously you'd have to adapt it to your case.

edited May 23 '17 at 10:25

Community

1
1

answered Oct 08 '13 at 18:26

Kiruse

1,613
1
12
21

so if i needed to add in the slideToggle before the animate would i do it like this: button.click > slideToggle > animate?` eg: $("#button").click(function() { $("#elementtoScrollToID").slideToggle( function() { $('html, body').animate({ scrollTop: $("#elementtoScrollToID").offset().top }, 2000); }); }); – Leon Oct 08 '13 at 20:05
@Leon Yes, pretty much. But since the slide itself already takes a short amount of time, I'd say you could trigger both animations simultaneously. But it's up to you. – Kiruse Oct 09 '13 at 05:06

JQuery slideTo after slideToogle has completed

1 Answers1