What is this bar called?

DownPW

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');
        });
    });
});

phenomlab

@DownPW thanks for reporting. Let me see if I can reproduce this.

phenomlab

@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

DownPW

nope sorry, same things

phenomlab

@DownPW hmm. Odd. I’ll have to take a look at that. Not seeing that here and I think that’s the same for @cagatay

phenomlab

@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();
        });
    });
});

DownPW

seems to be good my friend

phenomlab

@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');
        });
    });
});

DownPW

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

phenomlab

@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.

DownPW

Ok, thanks to confirm
so I have no possibility of modifying it to display the same effect as on v2?

phenomlab

@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.

DownPW

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');
        });
    });
});

phenomlab

@DownPW looks good to me.

phenomlab

@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

DownPW

@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

phenomlab

@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

https://sudonix.org/journey

phenomlab

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');
    });

DownPW

Not test on custom page. Test ASAP

What is this bar called?

Did this solution help you?

Related Topics

Test of youtube embeds

TNG + Nodebb

Footer bar add center text

ineffecient use of space on mobile

[NodeBB] Import custom Font

Reading Meter Progress bar

[NodeBB] First post customization

NodeBB Discord Plugins

What is this bar called?

Did this solution help you?

Related Topics

Individual Categories