Implementé la paginación JQuery/Bootpeg en mi sitio web. Funciona muy bien excepto por una cosa: cuando hace clic para pasar a una nueva página, se carga el nuevo conjunto de resultados, pero la página permanece en la parte inferior del nuevo conjunto de resultados donde están los botones de paginación. Esto significa que el espectador tiene que desplazarse hacia arriba hasta la parte superior de la página para desplazarse hacia abajo a través de los nuevos resultados, lo que creo que es un poco torpe (estoy mostrando 20 resultados por página).
Aquí está la codificación HTML y JS que estoy usando. También tengo un script PHP que extrae los datos de mi base de datos y los muestra (fetchpages.php). ¿Hay alguna forma de modificar el código para que la página se vuelva a mostrar desde la parte superior de los nuevos resultados (ya sea la parte superior de la página o un punto de anclaje en la página)?
$(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:
$(ventana).scrollTop(0); // use esto para configurar la página de nuevo al principio
$(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 }); });