css 滚动到底部动画,滚动某个区域(overflow:auto)到底部

效果图:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            margin:0;
            padding:0;
        }
        .box{
            border:1px solid red;
            width:200px;
            height:300px;
            overflow:auto;
        }
    </style>
</head>
<body>
    <div style="height:100px;"></div>
    <div class="box">
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div><div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div><div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div>信息</div>
        <div class="bottom_box"></div>
    </div>
    
</body>
</html>
<script src="./jquery.3.2.1.min.js"></script>
<script>
$('.box').animate({scrollTop:$('.bottom_box').offset().top}, "slow","linear");
</script>

此版本存在一个问题,不推荐使用,可以使用我的第二种实现方法:

https://blog.csdn.net/qq_42740797/article/details/114652333

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页