[英]Jquery pagination button scroll to the top when click
我正在為新聞文章建立一個帶有分頁的網頁。 單擊時,我需要使分頁按鈕在頁面頂部滾動。 我已經嘗試修復它並在網上尋找解決方案,但仍然無法正常工作。 有誰知道如何實現這一目標? 先感謝您。
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>
您可以使其盡可能簡單並使用按鈕或 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
您可以使用window.scroll()
或element.scrollIntoView()
onPageClick: function (pageNumber) {
..........
window.scroll({
top: 0, left: 0,
behavior: 'smooth'
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.