Question

Here is my code:

$(".trigger").click(function () {
    $('.toggleContainer').slideToggle();
    $('.trigger').text($(this).text() == 'Show more' ? 'Hide' : 'Show more');
    $('.trigger').toggleClass('trigger_alt')
    $('html, body').animate({
        scrollTop: $(".trigger").offset().top
    }, 800);
});

How can i scroll back to another tag on the page or in my case to
another class which is above the .trigger class… lets say to
my .header for example on slideToggle callback
(when you click to close toggle back the toggleContainer).
I know that this second scroll should be in the callback, but if i do it this way:

    $('html, body').animate({
        scrollTop: $(".trigger").offset().top
    }, 800, function () {
        $('html, body').animate({
            scrollTop: $(".header").offset().top
        }, 800);

    });

it animates to .trigger and without stopping animates to .header

Answer 1

The second animation should not be in the callback. If you’re using the click event for the open and close functions you’ll have to use some method to check the state of the toggle and then do one animation or the other, not both. The other option is to split the entire function into two separate functions and use the toggle event rather than the click event on the .trigger element.