建立一个页面自动滚动的模板
时间: 2023-09-18 19:08:38 浏览: 37
以下是一个简单的页面自动滚动的模板:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动滚动页面</title>
<style>
body {
height: 2000px; /* 设置页面高度 */
}
.scroll {
position: fixed;
right: 20px;
bottom: 20px;
width: 100px;
height: 40px;
background-color: #f1f1f1;
text-align: center;
line-height: 40px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="scroll">点击滚动</div>
<script>
var scrollBtn = document.querySelector('.scroll');
scrollBtn.addEventListener('click', function() {
window.scrollTo({
top: document.body.scrollHeight, // 滚动到页面底部
behavior: 'smooth' // 平滑滚动
});
});
</script>
</body>
</html>
```
这个模板设置了一个页面高度为2000px的 body 元素,然后在页面右下角添加了一个按钮,点击按钮后页面会自动滚动到底部。按钮的样式和位置可以根据需求进行调整。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)