html 5 设置滚动条至底部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>页面滚动到最底部</title>
<meta>
<script type="text/javascript" src="./public/js/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="./public/css/public.css">
<link rel="stylesheet" href="./public/css/bootstrap.min.css">
<style>
.container{
margin-top:100px;
width:100%;
height:500px;
border:1px solid #ccc;
overflow:auto;
}
.item{
width:100%;
height:200px;
border:1px solid #ccc;
}
.btn{
width:80px;
padding:20px;
border:none;
outline:none;
background:#eb4450;
color:#fff;
margin:20px;
}
</style>
</head>
<body>
<button class="btn" id="addEle">添加</button>
<div class="container" id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script type="text/javascript">
$(function(){
$("#addEle").click(()=>{
let ele = document.createElement("div");
let container= document.getElementById("container")
ele.classList.add("item");
$(".container").append(ele); //scrollIntoView 是让父元素滚动到最底部
ele.scrollIntoView();
})
})
</script>
</body>
</html>
上一篇：
通过多线程提高代码的执行效率例子