如何切换类并使用jQuery同时滚动到该类？

Question

所以我试图切换一个有div滑动的类，但我也想同时跳转到div。但我似乎无法在YouTube或Google上找到任何内容。

$(document).ready(function() {
console.log("The page successfully loaded");

$('#click').on('click', function(){

    $('#click').toggleClass('lol');
});

$('.anson').on('click', function() {

    $('html, body').animate({scrollTop: 5000}, "slow");
})

$('#info').on('click', function(){
    $("#about").toggle(500).animate({scrollTop: 5004}, "slow");

});

});

这是一个JSFiddle：

忽略不起作用的图像，只需点击底部的破碎图像，一直到最右边。 div应该弹出底部，但它不会滑到它上面，我希望它可以滑动/向下滚动到它。

Answer 1

你需要做的是添加一个回调函数来切换，一旦切换完成执行，它将滚动到该部分。请参阅下面的代码段

$('#about').toggle(500, function() {
    $('html, body').animate({
        scrollTop: $('#about').offset().top
    }, 500);
});

检查https://jsfiddle.net/3f3fvdee/

Answer 2

嘿嗨兄弟这就是你想要的，我在你的jquery中做了一些改变

$(document).ready(function() {
console.log("The page successfully loaded");

$('#click').on('click', function(){

    $('#click').toggleClass('lol');
});

$('#info').on('click', function() {

    $('html').animate({scrollTop: 5000}, "slow");
});

$('#info').on('click', function(){
    $("#about").toggle(500).animate({scrollTop: -200}, "slow");

});

 });

这是fiddle

Answer 3

你必须在“show animation”之后添加滚动功能。将JS更改为：

$(document).ready(function() {
    console.log("The page successfully loaded");

    $('#click').on('click', function(){

        $('#click').toggleClass('lol');
    });

    $('.anson').on('click', function() {

        $('html, body').animate({scrollTop: 5000}, "slow");
    })

    $('#info').on('click', function(){
        $("#about").toggle(500);
        $("html").animate({scrollTop: 5004}, "slow");

    });

});

JSFiddle