@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 
