我正在为新闻文章构建一个带有分页的网页。单击时,我需要使分页按钮滚动到页面顶部。我已经尝试修复它并在线寻找解决方案,但仍然无法正常工作。有谁知道如何实现这一目标?提前致谢。
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>
答案 0 :(得分:0)
您可以尽可能简单并使用按钮或 href 属性: 假设您使用此图像:
HTML: href="#" 将始终返回到页面顶部,或者如果它不起作用,您可以使用您的 /url
<a href="#" id="back"><img src="https://img.icons8.com/nolan/42/circled-left-2.png"/></a>
CSS:`
#back {
position: fixed;
right:0%;
bottom:0%;
}
`
我已经在您的代码中对其进行了测试,并且可以正常工作。
使用此处的图标替换您的图像 https://icons8.com/icons/set/arrow-up
答案 1 :(得分:0)
您可以使用 window.scroll()
或 element.scrollIntoView()
onPageClick: function (pageNumber) {
..........
window.scroll({
top: 0, left: 0,
behavior: 'smooth'
});
}