javascript - 少读按钮滚动页面

标签 javascript html css button scroll

我的网站上有一个用于产品说明的阅读更多/阅读更少按钮。

我的问题是,在扩展描述的底部,单击“少读”按钮时,它会按预期缩短描述,但页面不会向上滚动到描述 div 的顶部,所以我只能继续寻找在页脚处。

有没有办法让它向上滚动到 div 的顶部?

最佳答案

对于 future 的读者,这 Fiddle有一个完美运行的脚本。

HTML

<div class="first"><button type="button">Click Me!</button></div>
<div class="second">Hi</div>

JavaScript

$("button").click(function() {
    $('html,body').animate({
        scrollTop: $(".second").offset().top},
        'slow');
});

CSS

.first {
    width: 100%;
    height: 1000px;
    background: #ccc;
}

.second {
    width: 100%;
    height: 1000px;
    background: #999;
}

关于javascript - 少读按钮滚动页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34062501/

相关文章:

javascript regex if 语句用于2个不同的输入值

javascript - 在 javascript 中注册事件监听器的最有效方法是什么

javascript - 模态内可扩展文本的 CSS 问题

javascript - 将焦点限制在模态对话框中的元素

html - CSS:带有水平滚动和下拉按钮的顶部栏

css - 背景颜色延伸到 ul 的整个宽度

css - 如何给一个元素添加两种动画样式

javascript - 如何在 extjs 6 树列表中设置正确的方向

javascript - 在 Javascript 字符串中调用 ID 和类

html - 响应式网格框架 - float : vs display: table-cell