位置：酷虾米代码 js使div滚动条滚动到底部

js使div滚动条滚动到底部

栏目：代码更新：2023-08-19 8人看过

让div超出高度部分不隐藏而是显示滚动条，但滚动条默认是在顶部，在一些场景例如聊天窗口需要滚动条到达底部，使用了JS，点击按钮使滚动条到达底部，也可以是其他触发条件。参考以下代码：


<style>
    #box{
        height:200px;
        width:300px;
        background:#ddd;
        padding:20px;
        margin:20px;
        overflow-y: scroll;/*内容超过div高度时出现垂直滚动条*/
    }
</style>

<div id="box">
    这是内容<br/>
    这是内容<br/>
    这是内容<br/>
    这是内容<br/>
    这是内容<br/>
    这是内容<br/>
    这是内容<br/>
    这是内容<br/>
    这是内容<br/>
    这是内容<br/>
    这是内容<br/>
    这是内容<br/>
    这是内容<br/>
    这是内容<br/>
    这是内容<br/>
    这是内容<br/>
    这是内容<br/>
</div>

<a href="javascript:gobottom();">使滚动条到达底部</a>

<script>
    function gobottom(){
        var elmnt = document.getElementById("box");
        elmnt.scrollTo(0, elmnt.scrollHeight - elmnt.clientHeight)
    }
</script>

附件下载 [ 下载次数：999 ]

收藏、推荐 Functions

我要收藏

文章《js使div滚动条滚动到底部》的地址：https://www.kuxiami.com/daima/619aaac36566fd8d267a1376ae1a3b6e.html

div超出部分出现滚动条

JQ键盘回车键提交确认