javascript - 显示隐藏 并同时滚动的按钮

Question

基本上，我正在尝试制作一些显示/隐藏不同“div”的按钮。我在 jQuery 中找到了一种方法，使按钮“主页”显示隐藏的“div”并将其淡入，但同时我希望它向下滚动到页面的某个部分，例如:如果我显示 div2但 div1 已经可见，它会显示两者并向下滚动到 div2 开始的位置。

HTML:

    <button type="button" id="Home">Homepage</button>
    <div id="div1" class="div1">
    <h1> Welcome to the homepage! </h1>
    <h1> meh. </h1>
    <h1> meh. </h1>
    <h1> continue </h1>
    <h1> ---------- <h1>
    // I need to scroll here as soon as it loads/fades in
    // sort of like a simultanious button
    // The home button only loads it all in with jQ
    // BUT I need to scroll to this position at same time as load
    <h1> meh x2 </h1>
    <h1> finished </h1>
    </div>

jQuery:

    $('#Home').click(function() {
        $('#div1').toggle('fast', function() {
        });
    });

CSS:

    .div1 { display:none;}

要尝试以更简单的方式展示这一点，请查看此 fiddle : http://jsfiddle.net/onkz/qjd8v3hk/3/

如果 JavaScript 使这项任务更容易，那就继续吧……我不介意。我不喜欢乱码...哦，如果卷轴可以是动画的/平滑的，那就更好了!谢谢。

Answer 1

使用$("html, body").animate()使用animate函数改变body的滚动位置。然后，您可以使用 anchor 对象或任何您想设置的滚动位置。

我已经更新了你的 jsfiddle，你可以在这里查看。 http://jsfiddle.net/qjd8v3hk/5/