Question

这是我的代码：

$(".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);
});

如何滚动回页面或我的情况下的另一个标签另一个在.trigger类之上的类...让我们说我的.header，例如slideToggle回调（当您单击以关闭切换toggleContainer时）。我知道第二个滚动应该在回调中，但如果我这样做：

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

    });

它动画为.trigger并且不会停止动画到.header

Answer 1

第二个动画不应该在回调中。如果您使用click事件来打开和关闭函数，则必须使用某种方法来检查切换的状态，然后执行一个动画或另一个动画，而不是两个动画。另一个选项是将整个函数拆分为两个单独的函数，并使用toggle事件而不是.trigger元素上的click事件。

Answer 2

var trigger = $('.trigger');
var container = $('.container');
trigger.toggle(

function () {
    container.slideDown();
    trigger.text($(this).text() == 'Learn more' ? 'Hide' : 'Learn more');
    $('html, body').animate({
        scrollTop: $(".trigger").offset().top
    }, 800);
}, function () {
    container.slideUp();
    trigger.text($(this).text() == 'Learn more' ? 'Hide' : 'Learn more');
    $('html, body').animate({
        scrollTop: $(".header").offset().top - 20
    }, 800);
});

好的我回答了我的问题。如果有人有更好的解决方案，请在此处发布。

如何将页面滚动到slideToggle和回调上的特定标记或类以将其滚动到另一个标记或类？

2 个答案: