Question

基本上，我正在尝试制作一些按钮来显示/隐藏不同的＆＃34; div＆＃34;。我在jQuery中找到了一种方法来制作按钮＆＃34;主页＆＃34;显示一个隐藏的＆＃34; div＆＃34;并淡入它，但同时我希望它向下滚动到页面的某个部分，例如：如果我显示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;}

要尝试以更简单的方式显示此内容，请查看此小提琴： http://jsfiddle.net/onkz/qjd8v3hk/3/

如果JavaScript让这个任务变得更容易，那么请继续...我不介意。我不是凌乱代码的粉丝...... 哦，如果滚动可以动画/平滑，那就更好了！感谢。

Answer 1

使用$("html, body").animate()使用animate函数更改正文的滚动位置。然后，您可以使用锚点对象或任何您想要设置的位置来滚动它。

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

Answer 2

使用锚点，在这里，我更新了你的小提琴：http://jsfiddle.net/qjd8v3hk/4/

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

按钮显示隐藏的<div> AND同时滚动</div>

2 个答案: