javascript - 如何使用 jquery 和 javascript 创建自动向下滚动效果?
问题描述
如何使用 jquery 和 javascript 实现自动向下滚动效果?
<ul>
<li><a >Beers</a></li>
<li><a >Community</a></li>
<li><a >Shop</a></li>
</ul>
解决方案
这是一个简单的示例,说明如何使用动画实现底部滚动:
var button = $("button")
// handle click and add class
button.on("click", function() {
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
})
body {
background: #fff;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
.bottom-wrapper {
margin: 0 auto;
position: fixed;
bottom: 0;
left: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><a >Beers</a></li>
<li><a >Community</a></li>
<li><a >Shop</a></li>
<li><a >Beers</a></li>
<li><a >Community</a></li>
<li><a >Shop</a></li> <li><a >Beers</a></li>
<li><a >Community</a></li>
<li><a >Shop</a></li> <li><a >Beers</a></li>
<li><a >Community</a></li>
<li><a >Shop</a></li> <li><a >Beers</a></li>
<li><a >Community</a></li>
<li><a >Shop</a></li> <li><a >Beers</a></li>
<li><a >Community</a></li>
<li><a >Shop</a></li> <li><a >Beers</a></li>
<li><a >Community</a></li>
<li><a >Shop</a></li> <li><a >Beers</a></li>
<li><a >Community</a></li>
<li><a >Shop</a></li> <li><a >Beers</a></li>
<li><a >Community</a></li>
<li><a >Shop</a></li> <li><a >Beers</a></li>
<li><a >Community</a></li>
<li><a >Shop</a></li> <li><a >Beers</a></li>
<li><a >Community</a></li>
<li><a >Shop</a></li> <li><a >Beers</a></li>
<li><a >Community</a></li>
<li><a >Shop</a></li> <li><a >Beers</a></li>
<li><a >Community</a></li>
<li><a >Shop</a></li> <li><a >Beers</a></li>
<li><a >Community</a></li>
<li><a >Shop</a></li> <li><a >Beers</a></li>
<li><a >Community</a></li>
<li><a >Shop</a></li> <li><a >Beers</a></li>
<li><a >Community</a></li>
<li><a >Shop</a></li>
</ul>
<div class="bottom-wrapper">
<button>Scroll to botom</button>
<div>
推荐阅读
- neo4j - 实体列表之间存在关系
- php - Codeigniter :比较两个日期并将其显示在带有列表的表格上
- node.js - 如何查找用户已加入的所有课程?猫鼬
- elastic-stack - ELK(Elastic Stack)服务器运行进程的可视化
- php - 如何将 jquery 数据相应地/单独地填充到卡片中?
- java - 在 JOGL 中遇到 SSBO 问题
- python - 如何获取图像内矩形内的像素值
- python - TypeError: 'str' object is not callable while trying to use python swampy
- swift - Nested UIStackView child in UIScrollView does not stretch to fill
- python - Tkinter how to size fonts and keep alignment