Hello @phenomlab
I find a bug 
For example, I’m on the home page and I scroll down.
The button at the bottom right appears.
If I then go directly to the chat for example, the button remains and interferes with navigation/chat
Same for all notifications page
We need a function to deactivate the button depending on the page/URL (chats, notifications, user) like you did for the reading meter bar
My code :
// Scroll to top function / Reading Meter Bar /
// 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
$(window).scroll(function() {
var thisURL = window.location.href;
var checkURL = ["topic", "notifications", "user"];
var isFound = false;
for (var i = 0, len = checkURL.length; i < len; i++) {
if (thisURL.indexOf(checkURL[i]) > -1) {
isFound = true;
break;
}
}
if (isFound) {
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');
}
}
});
// Scroll to top when #pageUp is clicked
$(document).on("click", "#pageUp", function(e) {
const firstTopic = $('[component="category/topic"][data-index="0"]');
if (firstTopic.length) {
$("html").animate({
scrollTop: 0
}, '300');
return false;
} else {
ajaxify.refresh();
}
$('#progress-bar').width(0);
pageUp.removeClass('show');
});
});
});
PW and WS Spirit alive
@DownPW thanks for reporting. Let me see if I can reproduce this.
@DownPW Can you replace your function with this one and let me know?
// 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
$(window).scroll(function() {
var thisURL = window.location.href;
var checkURL = ["topic", "notifications", "user"];
var isFound = false;
for (var i = 0, len = checkURL.length; i < len; i++) {
if (thisURL.indexOf(checkURL[i]) > -1) {
isFound = true;
break;
}
}
if (isFound) {
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');
}
}
});
// Scroll to top when #pageUp is clicked
$(document).on("click", "#pageUp", function(e) {
const firstTopic = $('[component="category/topic"][data-index="0"]');
if (firstTopic.length) {
$("html").animate({
scrollTop: 0
}, '300');
return false;
} else {
ajaxify.refresh();
}
$('#progress-bar').width(0);
pageUp.removeClass('show');
});
});
});
/*
Set pages where the progress bar should not be shown - see examples
in below array, and ensure you follow the same syntax for any you need to
add
*/
$(window).on('action:ajaxify.end', function(data) {
$(document).ready(function() {
var bar = $('.reading-meter');
var thisURL = window.location.href;
var checkURL = new Array("user", "notifications");
var isFound = false;
for (var i = 0, len = checkURL.length; i < len; i++) {
if (thisURL.indexOf(checkURL[i]) > -1) {
isFound = true;
break;
}
}
if (isFound) {
//console.log("Page '" + checkURL[i] + "' is in URL - hide progress bar");
bar.removeClass('show');
}
});
});
@cagatay reported something similar a while back IIRC and this was the solution.
Thanks
nope sorry, same things
PW and WS Spirit alive
@DownPW Can you try with this code?
// 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();
});
});
});
seems to be good my friend
PW and WS Spirit alive
@DownPW not sure if you’ve noticed, but (at least for me) the scroll to top function no longer works?
EDIT - there is a bug in the above code. Please use this updated version
// 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) {
const firstTopic = $('[component="category/topic"][data-index="0"]');
if (firstTopic.length) {
$("html").animate({
scrollTop: 0
}, '300');
return false;
} else {
ajaxify.refresh();
}
$('#progress-bar').width(0);
pageUp.removeClass('show');
});
});
});
It’s funny I just realized it and I was going to share it here and I see your message!!
Thanks you Mark @phenomlab 
On the other hand, I have never been careful but I have the impression that the page is reloaded when you click on the button.
I don’t know if it’s me but before, (on v2 perhaps?) we saw the page scroll from bottom to top after pressing the button
I find this strange. I’ve never seen this on other sites using the same type of scroll to top
PW and WS Spirit alive
@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.
Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…
Ok, thanks to confirm
so I have no possibility of modifying it to display the same effect as on v2?
PW and WS Spirit alive
@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');
});
});
});
PW and WS Spirit alive
@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
PW and WS Spirit alive
@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
PW and WS Spirit alive
@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.
