javascript - 单击时Jquery分页按钮滚动到顶部
问题描述
我正在为新闻文章建立一个带有分页的网页。单击时,我需要使分页按钮在页面顶部滚动。我已经尝试修复它并在网上寻找解决方案,但仍然无法正常工作。有谁知道如何实现这一目标?先感谢您。
https://codepen.io/christine-tine27/pen/YzpPGxe
var items = $(".list-wrapper .list-item");
var numItems = items.length;
var perPage = 5;
items.slice(perPage).hide();
$('#pagination-container').pagination({
items: numItems,
itemsOnPage: perPage,
prevText: "«",
nextText: "»",
onPageClick: function (pageNumber) {
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
items.hide().slice(showFrom, showTo).show();
}
});
.list-wrapper {
padding: 15px;
overflow: hidden;
}
.list-item {
border: 1px solid #EEE;
background: #FFF;
margin-bottom: 10px;
padding: 10px;
box-shadow: 0px 0px 10px 0px #EEE;
}
.list-item h4 {
color: #FF7182;
font-size: 18px;
margin: 0 0 5px;
}
.list-item p {
margin: 0;
}
.simple-pagination ul {
margin: 0 0 20px;
padding: 0;
list-style: none;
text-align: center;
}
.simple-pagination li {
display: inline-block;
margin-right: 5px;
}
.simple-pagination li a,
.simple-pagination li span {
color: #666;
padding: 5px 10px;
text-decoration: none;
border: 1px solid #EEE;
background-color: #FFF;
box-shadow: 0px 0px 10px 0px #EEE;
}
.simple-pagination .current {
color: #FFF;
background-color: #FF7182;
border-color: #FF7182;
}
.simple-pagination .prev.current,
.simple-pagination .next.current {
background: #e04e60;
}
<div class="list-wrapper">
<div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div>
<div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div>
<div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div>
<div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div>
<div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div>
<div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div>
<div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div>
<div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div>
<div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div>
<div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div>
<div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div>
<div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div><div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div><div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div>
<div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div>
<div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div>
<div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div>
<div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div><div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div>
<div class="list-item">
<h4>Lorem</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, suscipit laboriosam sequi, sint cumque asperiores corrupti excepturi porro fugit, maiores repellat aliquam dicta tempora eius atque. Placeat, quae reiciendis. Nesciunt?.</p>
</div>
</div>
解决方案
你可以使用window.scroll()
或element.scrollIntoView()
onPageClick: function (pageNumber) {
..........
window.scroll({
top: 0, left: 0,
behavior: 'smooth'
});
}
推荐阅读
- javascript - 我希望粘性侧边栏在页脚中停止。我该怎么做?
- spring-integration - Spring Boot、Spring 集成 RabbitMQ 和 AWS Kinesis 集成
- python - 如何暂停线程池、运行函数和恢复?
- javascript - 带有 data-url href 的元素不会显示在 svg 中
- oauth - 使用 passport-auth0-openidconnect 时,如何获取完整的访问令牌来调用 /api/v2/users/?
- google-sheets - 基于跨列和跨行的单个单元格的条件格式
- visual-studio - 由于 CRC 错误导致 nuget 配置错误,.NET 框架解决方案开始失败
- python - 无法在反向 shell 中执行 cd 命令
- python - 如何在 FloatLayout,Python + Kivy 的按钮下添加方法
- sql-server - 为什么 Microsoft.SqlServer.Management.SqlParser.Parser 为此查询创建的 AST 包含 SqlTableValuedFunctionRefExpression?