I have implemented JQuery/Bootpeg pagination on my website. It works beautifully except for one thing: when you click to move to a new page the new set of results is loaded, but the page remains at the bottom the new set of results where the pagination buttons are. This means the viistor has to scroll back up to the top of the page to scroll down through the new results, which I think is kind of clunky (I am showing 20 results per page).
Here are the HTML and JS coding I am using. I also have a PHP script which extracts the data from my database and displays it (fetchpages.php). Is there any way that the code can be tweaked so that the page redisplays from the top of the new results (either the top of the page or an anchor point on the page)?
$(document).ready(function() {
$("#results").load("fetchpages.php"); //initial page number to load
$(".pagination").bootpag({
total: <?php echo $pages; ?>,
page: 1,
maxVisible: 5
}).on("page", function(e, num){
e.preventDefault();
$("#results").prepend('<div class="loading-indication"><img src="img/ajax-loader.gif" /> Loading...</div>');
$("#results").load("fetchpages.php", {'page':num});
});
});<script type="text/javascript" src="scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="scripts/jquery.bootpag.min.js"></script>
<div id="results"></div>
<div class="pagination"></div>JQuery:
$(window).scrollTop(0); // use this to set page back to top
$(document).ready(function() {
$("#results").load("fetchpages.php"); //initial page number to load
$(".pagination").bootpag({
total: <?php echo $pages; ?>,
page: 1,
maxVisible: 5
}).on("page", function(e, num){
e.preventDefault();
$("#results").prepend('<div class="loading-indication"><img src="img/ajax-loader.gif" /> Loading...</div>');
$("#results").load("fetchpages.php", {'page':num});
$(window).scrollTop(0); // use this to set page back to top
});
});