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

标签 javascript jquery html css

基本上,我正在尝试制作一些显示/隐藏不同“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 使这项任务更容易,那就继续吧……我不介意。 我不喜欢乱码... 哦,如果卷轴可以是动画的/平滑的,那就更好了! 谢谢。

最佳答案

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

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

关于javascript - 显示隐藏 <div> 并同时滚动的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25477330/

相关文章:

javascript - Firebase 数据库保存数据

javascript - 从左到右的文本下划线动画

javascript - 同位素插件自动高度问题

jquery - 带垂直拇指托盘的超大全屏 slider

javascript - 从 api 中解析 php 中的 json 数组

c# - ITextSharp 应用程序的 CSS 中的 Word-wrap 属性的替代方法

html - 对用户隐藏 HTML 代码?

javascript - 以设定的间隔增加和减少 div 的宽度和高度

javascript - node-red 将 json 字符串解析为 msg.payload

javascript - 根据覆盖背景区域的亮度更改文本颜色?