I have a page which feedbacks which looks like this (I just show 1 comment per page to see if the pagination works fine. Otherwise I’ll show more):
The feedbacks come from a mysql database and are filtered as 1 feedback per page at the moment.
In my code, I put the logics so that when I click on the next page, it shows the comments correctly with the GET feature which is sent back from a PHP function in another file.
Here is a small code sample:
In my main file I call a function called paginate and I print it out
<?php print paginate('', '?courseid='.$courseid.'&page=', $nbrPages, $current); ?>
In my main function in another file I have something like this which constructs the pagination with PHP variables, one by one.
function paginate($url, $link, $total, $current, $adj=5){
$prev = $current - 1;
$next = $current + 1;
$penultimate = $total - 1;
$pagination = '';
if ($total > 1) {
$pagination .= "<div class="row pagination_row">n";
$pagination .= "<div class="col">n";
..
The problem I am facing is: When I click on “next” or any page I want to go, there is this this refresh feature which scrolls to the top and the user has to scroll back down to see the comment. So I put this code in javascript to rescroll back to the comment:
<script>
document.addEventListener("DOMContentLoaded", function (event) {
var scrollpos = sessionStorage.getItem('scrollpos');
if (scrollpos) {
window.scrollTo(0, scrollpos);
sessionStorage.removeItem('scrollpos');
}
});
window.addEventListener("beforeunload", function (e) {
sessionStorage.setItem('scrollpos', window.scrollY);
});
</script>
If works fine but There’s a micro-freeze every time, which makes sense because the standard behavior is to scroll up after a refresh, and the script here scrolls down again. I’ve also seen this JQuery class preventDefault();
which prevents the page to scroll at all but in my case nothing refreshes. Does anyone have an idea how to refresh and not make the scroll up and scroll down action? So it seems more smooth? Thanks