Jquery pagination button scroll to the top when click

Question

I'm building a webpage with pagination for press article. I need to make the pagination button scroll on top of the page when click. I've tried to fix it and look for solution online but still doesn't work. Does anyone knows how to achieve this?. Thank you in advance.

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

You could keep it as simple as possible and use a button or a href attribute: Let's say you use this image:

HTML: The href="#" will always return to the top of the page or if it's not working you could use your /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%;
}

`

I've tested it in your code and it's working.

Replace your image using a icon from here https://icons8.com/icons/set/arrow-up

Answer 2

you can use window.scroll() or element.scrollIntoView()

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