Javascript 显示隐藏的按钮<；部门>；并同时滚动

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

HTML:

CSS:

要尝试以更简单的方式显示这一点，请查看此小提琴：

如果JavaScript使这项任务变得更容易，那么继续吧。。。我不介意。 我不喜欢乱七八糟的代码。。。 哦，如果卷轴可以是动画/平滑的，那就更好了！

---

谢谢。

使用锚，在这里，我更新了你的小提琴：

使用

$（“html，body”）.animate（）

使用animate函数更改body的滚动位置。然后，您可以使用锚对象或任何您想要设置它滚动到的位置

---

我已经更新了你的JSFIDLE，你可以在这里查看

这是可行的，但只有一次。出于某种原因，它在第二次按下后会断开：/JavaScript中也可以这样做吗？

    <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>

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

    .div1 { display:none;}

<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 yay </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> meh x2 </h1>
        <h1> meh x2 </h1>
        <h1> meh x2 </h1>
        <h1> meh x2 </h1>
        <h1> meh x2 </h1>
        <h1> meh x2 </h1>
        <h1> meh x2 </h1>
        <h1> meh x2 </h1>
        <h1> meh x2 </h1>
        <h1> meh x2 </h1>
        <h1 id="go_here"> show me !!!!</h1>
        <h1> meh x2 </h1>
    </div>

$('#Home').click(function() {
    $('#div1').toggle('fast', function() {
        location.hash = "#go_here";
    });
});