אפשרות למעבר בין עמודים - בראש הדף.

[אלה ברכב 0]

יוצא לי פעמים רבות שאני קורא אשכול מהסוף להתחלה,
וכשאני מגיע להודעה הראשונה בעמוד אני רוצה לדפדף לעמוד קודם,
אבל אז אני מגלה שכדי לעבור בין עמודים צריך לגלול שוב למטה ורק שם יש את האפשרות הזו.

מה טוב ונעים היה לסדר שגם בראש העמוד תנתן אפשרות לדפדף לעמוד קודם - כמו שיש בפורומים מקבילים.

תודה.

[חיים ברזל]

@מאיר

[משה שמחה]

@אלה-ברכב-0
כל הכבוד על היוזמה
גם אני נתקלתי בזה הרבה פעמים
וחשבתי שזה גזירה משמים ואין מה לעשות

@חיים-ברזל נראה לי שכדאי לתייג דווקא את @ראובן-שבתי

[הרשלה 0]

@אלה-ברכב-0 כתב באפשרות למעבר בין עמודים - בראש הדף.:

יוצא לי פעמים רבות שאני קורא אשכו

אחלה רעיון בנתיים תדע שתמיד אתה יכול ללחוץ על זה איפה שתלחץ זה יקח אותך

[ראובן שבתי]

@אלה-ברכב-0 תשנה לגלילה אין סופית ולא תצטרך לעבור עמודים

זה צריך להיות ככה

[MEM]

@אלה-ברכב-0 כתב באפשרות למעבר בין עמודים - בראש הדף.:

יוצא לי פעמים רבות שאני קורא אשכול מהסוף להתחלה,
וכשאני מגיע להודעה הראשונה בעמוד אני רוצה לדפדף לעמוד קודם,
אבל אז אני מגלה שכדי לעבור בין עמודים צריך לגלול שוב למטה ורק שם יש את האפשרות הזו.

מה טוב ונעים היה לסדר שגם בראש העמוד תנתן אפשרות לדפדף לעמוד קודם - כמו שיש בפורומים מקבילים.

תודה.

אם כבר סרגל צף…

[ראובן שבתי]

[MEM]

@ראובן-שבתי כתב באפשרות למעבר בין עמודים - בראש הדף.:

תותח על!!!

[ישראליק]

@ראובן-שבתי
יישר כח אבל אני מוכרח להסתייג נחרצות מהפתרון הנוכחי

א. אלמנטים צפים נוטים להסתיר תוכן חשוב וליצור שטחים מתים שלא ניתן ללחוץ עליהם. ב. זה שובר את הLayout הטבעי של האתר, במובייל זה אסון ובדסקטופ זה נראה כמו טלאי ולא כמו פיצ’ר. ג. להסתמךעל CSS Positioning כדי להכריח אלמנט לשבת במקום מסוים זה לא חכם זה מביא שבירות בשינויי רזולוציה וכדו’, אתה לא יכול לדעת איפה זה ידרוס אלמנטים אחרים אצל משתמשים עם מסכים שונים משלך.

אני הייתי הולך על סקריפט שעושה DOM Injection בצורה נקייה ושותל את הניווט בפשטות בסרגל הכלים העליון

הסקריפט שלי מעלים את הסרגל הצף, ובעצם את הסרגל המקורי, קח בחשבון. הוא מייצר כפתורי עמודים חדשים וכולל תיבת קלט למעבר מהיר לעמוד ספציפי, ויושב בצורה רספונסיבית ליד כפתורי הסינון.

את הסקריפט אפשר להכניס ב: לוח בקרה למנהלים > מראה > תוכן מותאם אישית > Javascript מותאם אישית.

$(window).on('action:ajaxify.end', function (event, data) {
    if (ajaxify.data.template.topic) {
        
        // CSS מעוצב, עם רקעים, גבולות עדינים והובר
        if (!$('#smart-pagination-style').length) {
            $('<style id="smart-pagination-style">').text(`
                .pagination-block, .page-topic ul.pagination.justify-content-center { display: none !important; }
                #smart-jump-input::-webkit-outer-spin-button, #smart-jump-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
                #smart-jump-input { -moz-appearance: textfield; font-weight: bold; color: var(--bs-primary); text-align: center; box-shadow: none; outline: none; }
                
                /* עיצוב הקונטיינר הראשי של המספרים */
                .smart-desktop-bar { background-color: #f8f9fa; border: 1px solid #e5e7eb; padding: 3px; border-radius: 8px; }
                
                /* עיצוב כפתורים גלובלי */
                .smart-page-btn, .smart-nav-btn, .smart-ellipsis-btn { transition: all 0.2s ease; border: none; background: transparent; cursor: pointer; border-radius: 5px; }
                
                .smart-page-btn { min-width: 26px; height: 26px; line-height: 26px; font-weight: 600; padding: 0 4px; font-size: 13px; text-align: center; color: #4b5563; }
                .smart-nav-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: #6c757d; }
                .smart-ellipsis-btn { min-width: 20px; height: 26px; line-height: 18px; padding: 0; font-weight: bold; letter-spacing: 1px; color: #6c757d; }
                
                /* אפקטים במעבר עכבר (Hover) */
                .smart-page-btn:not(.bg-primary):hover, .smart-nav-btn:not(:disabled):hover, .smart-ellipsis-btn:hover { background-color: #e2e8f0; color: #111827; }
                
                /* פופאפ חיפוש עמוד */
                #smart-popover-container { display: none; position: absolute; background: white; padding: 4px; border-radius: 6px; box-shadow: 0 4px 15px rgba(0,0,0,0.12); border: 1px solid #e5e7eb; z-index: 9999; transform: translateX(-50%); }
            `).appendTo('head');
        }

        $('#smart-pagination-wrapper').remove();
        $('#smart-popover-container').remove();

        var currentPage = ajaxify.data.pagination.currentPage;
        var pageCount = ajaxify.data.pagination.pageCount;
        var tid = ajaxify.data.tid;

        if (pageCount <= 1) return;

        var buttonsHtml = `<button type="button" class="smart-nav-btn smart-prev" ${currentPage <= 1 ? 'disabled style="opacity:0.3; cursor:default;"' : ''}><i class="fa fa-chevron-right" style="font-size:10px;"></i></button>`;
        
        var range = [];
        range.push(1);
        
        var start = Math.max(2, currentPage - 1);
        var end = Math.min(pageCount - 1, currentPage + 1);

        if (start > 2) range.push('...');
        for (var i = start; i <= end; i++) range.push(i);
        if (end < pageCount - 1) range.push('...');
        
        if (pageCount > 1) range.push(pageCount);

        range.forEach(function(item) {
            if (item === '...') {
                buttonsHtml += `<button type="button" class="smart-ellipsis-btn align-middle">..</button>`;
            } else {
                var activeClass = (item === currentPage) ? 'bg-primary text-white shadow-sm' : '';
                buttonsHtml += `<button type="button" class="smart-page-btn ${activeClass}" data-page="${item}">${item}</button>`;
            }
        });

        buttonsHtml += `<button type="button" class="smart-nav-btn smart-next" ${currentPage >= pageCount ? 'disabled style="opacity:0.3; cursor:default;"' : ''}><i class="fa fa-chevron-left" style="font-size:10px;"></i></button>`;

        var wrapperHtml = `
            <div id="smart-pagination-wrapper" class="ms-auto me-auto d-flex align-items-center">
                <!-- דסקטופ (סרגל מעוצב) -->
                <div class="d-none d-md-flex align-items-center gap-1 smart-desktop-bar">
                    ${buttonsHtml}
                </div>

                <!-- מובייל (כפתור נפתח) -->
                <div class="d-md-none dropdown bottom-sheet">
                    <button class="btn btn-ghost btn-sm text-secondary fw-semibold" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fa fa-file-lines me-1"></i> עמ' ${currentPage}/${pageCount}
                    </button>
                    <ul class="dropdown-menu p-2 shadow-sm text-center">
                        <li>
                            <div class="d-flex align-items-center justify-content-center gap-1 smart-desktop-bar">
                                ${buttonsHtml}
                            </div>
                        </li>
                    </ul>
                </div>
            </div>`;

        var popoverHtml = `
            <div id="smart-popover-container">
                <input type="number" id="smart-jump-input" class="form-control form-control-sm border-0 bg-light" placeholder="בחר עמוד" style="width: 75px; height: 28px; font-size: 12px;" min="1" max="${pageCount}">
            </div>`;

        var replyContainer = $('[component="topic/reply/container"]');
        if (replyContainer.length) {
            replyContainer.before(wrapperHtml);
        } else {
            $('.topic-main-buttons .d-flex.me-auto').append(wrapperHtml);
        }
        $('body').append(popoverHtml);

        $('.smart-next').on('click', function() { if (currentPage < pageCount) ajaxify.go('topic/' + tid + '?page=' + (currentPage + 1)); });
        $('.smart-prev').on('click', function() { if (currentPage > 1) ajaxify.go('topic/' + tid + '?page=' + (currentPage - 1)); });
        
        $('.smart-page-btn').on('click', function() {
            var p = $(this).data('page');
            if (p !== currentPage) ajaxify.go('topic/' + tid + '?page=' + p);
        });

        $('.smart-ellipsis-btn').on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            var btn = $(this);
            var offset = btn.offset();
            
            $('#smart-popover-container').css({
                top: offset.top - 40,
                left: offset.left + (btn.outerWidth() / 2)
            }).fadeIn(150);
            
            setTimeout(function() { $('#smart-jump-input').focus(); }, 100);
        });

        $('#smart-jump-input').on('keypress', function(e) {
            if (e.which === 13) {
                var val = parseInt($(this).val());
                if (val >= 1 && val <= pageCount) {
                    $('#smart-popover-container').fadeOut(100);
                    ajaxify.go('topic/' + tid + '?page=' + val);
                }
            }
        });

        $(document).on('click', function(e) {
            if (!$(e.target).closest('#smart-popover-container, .smart-ellipsis-btn').length) {
                $('#smart-popover-container').fadeOut(100);
            }
        });
    }
});

מביא אותו כאן גם למשתמש הפשוט שיוכל לשים אותו בטמפרמונקי במקרה שחו"ר האתר לא יקבלו אותו.

// ==UserScript==
// @name         NodeBB Beautiful Pagination
// @namespace    http://tampermonkey.net/
// @version      9.0
// @description  Aesthetic, native-looking pagination for NodeBB
// @author       You
// @match        https://rechavimzelaze.ovh/topic/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function initPagination() {
        if (typeof $ === 'undefined' || typeof ajaxify === 'undefined' || !ajaxify.data) return;

        if (!$('#smart-pagination-style').length) {
            $('<style id="smart-pagination-style">').text(`
                .pagination-block, .page-topic ul.pagination.justify-content-center { display: none !important; }
                #smart-jump-input::-webkit-outer-spin-button, #smart-jump-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
                #smart-jump-input { -moz-appearance: textfield; font-weight: bold; color: var(--bs-primary); text-align: center; box-shadow: none; outline: none; }

                .smart-desktop-bar { background-color: #f8f9fa; border: 1px solid #e5e7eb; padding: 3px; border-radius: 8px; }
                .smart-page-btn, .smart-nav-btn, .smart-ellipsis-btn { transition: all 0.2s ease; border: none; background: transparent; cursor: pointer; border-radius: 5px; }

                .smart-page-btn { min-width: 26px; height: 26px; line-height: 26px; font-weight: 600; padding: 0 4px; font-size: 13px; text-align: center; color: #4b5563; }
                .smart-nav-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: #6c757d; }
                .smart-ellipsis-btn { min-width: 20px; height: 26px; line-height: 18px; padding: 0; font-weight: bold; letter-spacing: 1px; color: #6c757d; }

                .smart-page-btn:not(.bg-primary):hover, .smart-nav-btn:not(:disabled):hover, .smart-ellipsis-btn:hover { background-color: #e2e8f0; color: #111827; }

                #smart-popover-container { display: none; position: absolute; background: white; padding: 4px; border-radius: 6px; box-shadow: 0 4px 15px rgba(0,0,0,0.12); border: 1px solid #e5e7eb; z-index: 9999; transform: translateX(-50%); }
            `).appendTo('head');
        }

        $('#smart-pagination-wrapper').remove();
        $('#smart-popover-container').remove();

        var currentPage = ajaxify.data.pagination.currentPage;
        var pageCount = ajaxify.data.pagination.pageCount;
        var tid = ajaxify.data.tid;

        if (pageCount <= 1) return;

        var buttonsHtml = `<button type="button" class="smart-nav-btn smart-prev" ${currentPage <= 1 ? 'disabled style="opacity:0.3; cursor:default;"' : ''}><i class="fa fa-chevron-right" style="font-size:10px;"></i></button>`;

        var range = [];
        range.push(1);

        var start = Math.max(2, currentPage - 1);
        var end = Math.min(pageCount - 1, currentPage + 1);

        if (start > 2) range.push('...');
        for (var i = start; i <= end; i++) range.push(i);
        if (end < pageCount - 1) range.push('...');

        if (pageCount > 1) range.push(pageCount);

        range.forEach(function(item) {
            if (item === '...') {
                buttonsHtml += `<button type="button" class="smart-ellipsis-btn align-middle">..</button>`;
            } else {
                var activeClass = (item === currentPage) ? 'bg-primary text-white shadow-sm' : '';
                buttonsHtml += `<button type="button" class="smart-page-btn ${activeClass}" data-page="${item}">${item}</button>`;
            }
        });

        buttonsHtml += `<button type="button" class="smart-nav-btn smart-next" ${currentPage >= pageCount ? 'disabled style="opacity:0.3; cursor:default;"' : ''}><i class="fa fa-chevron-left" style="font-size:10px;"></i></button>`;

        var wrapperHtml = `
            <div id="smart-pagination-wrapper" class="ms-auto me-auto d-flex align-items-center">
                <div class="d-none d-md-flex align-items-center gap-1 smart-desktop-bar">
                    ${buttonsHtml}
                </div>
                <div class="d-md-none dropdown bottom-sheet">
                    <button class="btn btn-ghost btn-sm text-secondary fw-semibold" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fa fa-file-lines me-1"></i> עמ' ${currentPage}/${pageCount}
                    </button>
                    <ul class="dropdown-menu p-2 shadow-sm text-center">
                        <li>
                            <div class="d-flex align-items-center justify-content-center gap-1 smart-desktop-bar">
                                ${buttonsHtml}
                            </div>
                        </li>
                    </ul>
                </div>
            </div>`;

        var popoverHtml = `
            <div id="smart-popover-container">
                <input type="number" id="smart-jump-input" class="form-control form-control-sm border-0 bg-light" placeholder="בחר עמוד" style="width: 75px; height: 28px; font-size: 12px;" min="1" max="${pageCount}">
            </div>`;

        var replyContainer = $('[component="topic/reply/container"]');
        if (replyContainer.length) {
            replyContainer.before(wrapperHtml);
        } else {
            $('.topic-main-buttons .d-flex.me-auto').append(wrapperHtml);
        }
        $('body').append(popoverHtml);

        $('.smart-next').on('click', function() { if (currentPage < pageCount) ajaxify.go('topic/' + tid + '?page=' + (currentPage + 1)); });
        $('.smart-prev').on('click', function() { if (currentPage > 1) ajaxify.go('topic/' + tid + '?page=' + (currentPage - 1)); });

        $('.smart-page-btn').on('click', function() {
            var p = $(this).data('page');
            if (p !== currentPage) ajaxify.go('topic/' + tid + '?page=' + p);
        });

        $('.smart-ellipsis-btn').on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            var btn = $(this);
            var offset = btn.offset();

            $('#smart-popover-container').css({
                top: offset.top - 40,
                left: offset.left + (btn.outerWidth() / 2)
            }).fadeIn(150);

            setTimeout(function() { $('#smart-jump-input').focus(); }, 100);
        });

        $('#smart-jump-input').on('keypress', function(e) {
            if (e.which === 13) {
                var val = parseInt($(this).val());
                if (val >= 1 && val <= pageCount) {
                    $('#smart-popover-container').fadeOut(100);
                    ajaxify.go('topic/' + tid + '?page=' + val);
                }
            }
        });

        $(document).on('click', function(e) {
            if (!$(e.target).closest('#smart-popover-container, .smart-ellipsis-btn').length) {
                $('#smart-popover-container').fadeOut(100);
            }
        });
    }

    $(window).on('action:ajaxify.end', function(event, data) {
        if (ajaxify.data.template.topic) {
            initPagination();
        }
    });

    if (document.readyState === "complete" || document.readyState === "interactive") {
        setTimeout(function() {
            if (typeof ajaxify !== 'undefined' && ajaxify.data && ajaxify.data.template.topic) {
                initPagination();
            }
        }, 500);
    }
})();

ותמונה: