Jquery 分页按钮点击时滚动到顶部

Question

我正在为新闻文章建立一个带有分页的网页。 单击时，我需要使分页按钮在页面顶部滚动。 我已经尝试修复它并在网上寻找解决方案，但仍然无法正常工作。 有谁知道如何实现这一目标？ 先感谢您。

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>

Answer 1

您可以使其尽可能简单并使用按钮或 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

Answer 2

您可以使用window.scroll()或element.scrollIntoView()

    onPageClick: function (pageNumber) {
        ..........
        window.scroll({
          top: 0, left: 0,  
          behavior: 'smooth'
        });
    }