@DownPW it can easily be reverted, but I don’t want to maintain two sets of code. I’ll defer to others here for that final decision as I know it did cause some confusion.
no problem dude @phenomlab 
I put a modification here that seems to work as a reminder if you don’t mind.
–> If yes, you can delete it.
use $('html, body').animate({ scrollTop: 0 }, '300'); to smoothly scroll the page to the top when the #pageUp button is clicked. This code will provide a smooth scrolling effect from the bottom to the top of the page without reloading it.
What do you think of this?
// Scroll to top function
$(window).on('action:ajaxify.end', function(data) {
var matched = false;
$(document).ready(function() {
var pageUp = $('#pageUp');
var bar = $('.reading-meter');
var perWidth = $('.reading-meter').width();
// Main progressbar function
function pageScroller() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("progress-bar").style.width = parseFloat(scrolled).toFixed(0) + "%";
$('#percentage').val(parseFloat(scrolled).toFixed(0) + "%");
// Prevent the mouse scroll wheel from scrolling down after the pageUp button is clicked
if ($('#pageUp').is(':focus')) {
event.preventDefault();
}
}
// Bind the pageScroller function to the window's scroll event
$(window).scroll(function() {
pageScroller();
});
// Check the URL and composer visibility separately from the scroll event
function checkURL() {
var thisURL = window.location.href;
var checkArray = ["topic", "notifications", "user"];
var isFound = false;
for (var i = 0, len = checkArray.length; i < len; i++) {
if (thisURL.indexOf(checkArray[i]) > -1) {
isFound = true;
break;
}
}
return isFound;
}
// Function to update visibility based on URL and composer
function updateVisibility() {
if (checkURL()) {
bar.removeClass('show');
pageUp.removeClass('show');
} else {
// Exception here is that we don't want the scroll bar to show when the composer is active
if ($(window).scrollTop() > 0 && (!$('[component="composer"]').is(":visible"))) {
bar.addClass('show');
pageUp.addClass('show');
} else {
bar.removeClass('show');
pageUp.removeClass('show');
}
}
}
// Call updateVisibility initially
updateVisibility();
// Bind updateVisibility function to the window's scroll event
$(window).scroll(function() {
updateVisibility();
});
// Scroll to top when #pageUp is clicked
$(document).on("click", "#pageUp", function(e) {
$('html, body').animate({ scrollTop: 0 }, '300'); // Animate scrolling to top
$('#progress-bar').width(0);
pageUp.removeClass('show');
});
});
});
@DownPW looks good to me.
@DownPW Just to circle back to this, the decision to reload the page instead of multiple scrolling / clicking was based on this discussion, which I’m including here for brevity
https://community.nodebb.org/topic/17395/scroll-top-function?_=1695115491466
@phenomlab said in What is this bar called?:
@DownPW you are right - it used to scroll to the top but I changed it because “scroll top” actually only applied to what was in the DOM at the time meaning that as data was being added, the “top” position was no longer a true representation and so the button had to be clicked multiple times to reach the “real” top.
you are right @phenomlab the code I gave yesterday works but does the same thing as you described.
here a mix of the 2 (scroll to top & scroll to top with refresh)
// Scroll to top function (classic scroll to top)
$(window).on('action:ajaxify.end', function(data) {
var matched = false;
$(document).ready(function() {
var pageUp = $('#pageUp');
var bar = $('.reading-meter');
var perWidth = $('.reading-meter').width();
// Main progressbar function
function pageScroller() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("progress-bar").style.width = parseFloat(scrolled).toFixed(0) + "%";
$('#percentage').val(parseFloat(scrolled).toFixed(0) + "%");
// Prevent the mouse scroll wheel from scrolling down after the pageUp button is clicked
if ($('#pageUp').is(':focus')) {
event.preventDefault();
}
}
// Bind the pageScroller function to the window's scroll event
$(window).scroll(function() {
pageScroller();
});
// Check the URL and composer visibility separately from the scroll event
function checkURL() {
var thisURL = window.location.href;
var checkArray = ["topic", "notifications", "user"];
var isFound = false;
for (var i = 0, len = checkArray.length; i < len; i++) {
if (thisURL.indexOf(checkArray[i]) > -1) {
isFound = true;
break;
}
}
return isFound;
}
// Function to update visibility based on URL and composer
function updateVisibility() {
if (checkURL()) {
bar.removeClass('show');
pageUp.removeClass('show');
} else {
// Exception here is that we don't want the scroll bar to show when the composer is active
if ($(window).scrollTop() > 0 && (!$('[component="composer"]').is(":visible"))) {
bar.addClass('show');
pageUp.addClass('show');
} else {
bar.removeClass('show');
pageUp.removeClass('show');
}
}
}
// Call updateVisibility initially
updateVisibility();
// Bind updateVisibility function to the window's scroll event
$(window).scroll(function() {
updateVisibility();
});
// Scroll to top when #pageUp is clicked
$(document).on("click", "#pageUp", function(e) {
$('html, body').animate({ scrollTop: 0 }, '300'); // Animate scrolling to top
$('#progress-bar').width(0);
pageUp.removeClass('show');
});
});
});
// Scroll to refresh function (for specific URLs)
$(window).on('action:ajaxify.end', function(data) {
var refreshRoutes = ['/recent', '/unread', '/popular', '/top', '/solved', '/unsolved'];
var currentRoute = ajaxify.data.url;
if (refreshRoutes.includes(currentRoute)) {
var pageUp = $('#pageUp');
var bar = $('.reading-meter');
var perWidth = $('.reading-meter').width();
// Main progressbar function
function pageScroller() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("progress-bar").style.width = parseFloat(scrolled).toFixed(0) + "%";
$('#percentage').val(parseFloat(scrolled).toFixed(0) + "%");
// Prevent the mouse scroll wheel from scrolling down after the pageUp button is clicked
if ($('#pageUp').is(':focus')) {
event.preventDefault();
}
}
// Bind the pageScroller function to the window's scroll event
$(window).scroll(function() {
pageScroller();
});
// Function to update visibility based on URL and composer
function updateVisibility() {
// No need to check composer visibility for these routes
if ($(window).scrollTop() > 0) {
bar.addClass('show');
pageUp.addClass('show');
} else {
bar.removeClass('show');
pageUp.removeClass('show');
}
}
// Call updateVisibility initially
updateVisibility();
// Bind updateVisibility function to the window's scroll event
$(window).scroll(function() {
updateVisibility();
});
// Scroll to refresh when #pageUp is clicked
$(document).on("click", "#pageUp", function(e) {
ajaxify.refresh();
$('#progress-bar').width(0);
pageUp.removeClass('show');
});
}
});
I found it interesting to keep the scroll effect on the home page
The scroll to top with refresh is applied on the routes indicated in the script (/recent, /unread, etc.). The classic scroll to top applies to other pages and the scroll to top is disabled in chat, etc…
For the previous script, I used the code from your v2 and doing myself but I’m not being a good JS developer, so this time I asked to ChatGPT to help me, sorry !
I tested the code and it seems to work correctly without any bugs but could you check @phenomlab if this seems correct to you even if the code works?
A machine will not replace humans in this regard. At least for now
@DownPW Love it - let me try this out!
EDIT - Tried it, and there’s a couple of bugs. For example, if you use a custom page, scroll to the bottom, then use the back to top button, you have to scroll the mouse wheel down 16 times (if you do it quickly - depending on intervals it can be much less) before it’ll work properly. This is animation jitter as far as I can see where the animation does not complete on time and is therefore stuck in a loop.
Have a look yourself here and see if you get the same experience
Seems you can fix this by using e.preventDefault() see below
// Scroll to top when #pageUp is clicked
$(document).on("click", "#pageUp", function(e) {
e.preventDefault(); // Prevent default behavior
$('html, body').animate({ scrollTop: 0 }, '300'); // Animate scrolling to top
$('#progress-bar').width(0);
pageUp.removeClass('show');
});
Not test on custom page. Test ASAP
@DownPW said in What is this bar called?:
Not test on custom page. Test ASAP
The above code change I provided seems to resolve the issue.
This is good 
