JS 求助，在右上角添加「PgUp PgDn 」上下翻页按钮

不知是否你想要的，有问题再告知

// 右上角按钮实现上下翻新页
// see https://ld246.com/article/1759977992135
// vesion 0.0.3
// 0.0.3 新增alt+点击下方向键 向下滚动指定行，alt+shift+点击下方向键，向上滚动指定行；向下按钮和alt+点击向下按钮滚动时，会保留一定的重叠区域，方便浏览时衔接
// 0.0.2 修复滚动算法错误（之前的视窗计算有误差）；增加ctrl+点击向下方向键，实现向上翻页功能
(async ()=>{
    // 是否显示向上翻页按钮 true 显示 false 不显示
    const isShowPageUpBtn = false;

    // alt+点击 滚动高度，这里用行高 * 3 表示，由于每个人的行高不一样，这里可自行修改
    const altClickScrollHeight = 34 * 3;
    
    // 重叠高度，当上下滚动时，有一部分重叠区域不滚动（并非完全滚动整个视窗），方便上下文衔接，可根据自己需要修改
    const overlap = 40;

    // 不支持手机版
    if(isMobile()) return;
  
    // 添加toolbar按钮
    whenElementExist('#toolbar .fn__ellipsis').then((el)=>{
        if(!el) return;
        const pageDownBtnHtml = `<div data-menu="true" id="pageDownBtn" class="toolbar__item ariaLabel" aria-label="点击向下翻页" data-location="right"><svg style=""><use xlink:href="#iconArrowDown"></use></svg></div>`;
        el.insertAdjacentHTML('afterend', pageDownBtnHtml);
        const pageDownBtn = el.nextElementSibling;
        pageDownBtn.addEventListener('click', (event) => {
            const protyleEl = getProtyleEl();
            const scrollEl = protyleEl?.querySelector('.protyle-content');
            const isCtrlPressed = (event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey;
            const isAltPressed = event.altKey && !event.shiftKey && !event.ctrlKey && !event.metaKey;
            const isAltShiftPressed = event.altKey && event.shiftKey && !event.ctrlKey && !event.metaKey;
            // ctrl+点击向下方向键按钮
            if(isCtrlPressed) scrollPage(scrollEl, true);
            // alt+点击向下方向键按钮
            else if(isAltPressed) scrollPage(scrollEl, false, altClickScrollHeight);
            // alt+shift+点击向下方向键按钮
            else if(isAltShiftPressed) scrollPage(scrollEl, true, altClickScrollHeight);
            // 直接点击向下方向键按钮
            else scrollPage(scrollEl, false);
            
        });

        if(isShowPageUpBtn) {
            const pageUpBtnHtml = `<div data-menu="true" id="pageUpBtn" class="toolbar__item ariaLabel" aria-label="点击向上翻页" data-location="right"><svg style="transform: scaleY(-1);"><use xlink:href="#iconArrowDown"></use></svg></div>`;
            el.insertAdjacentHTML('afterend', pageUpBtnHtml);
            const pageUpBtn = el.nextElementSibling;
            pageUpBtn.addEventListener('click', (event) => {
                const protyleEl = getProtyleEl();
                const scrollEl = protyleEl?.querySelector('.protyle-content');
                scrollPage(scrollEl, true);
            });
        }
    });

    function scrollPage(element, isPageUp = true, amount = 0) {
      const scroller = element || window;
      const pageHeight = scroller === window 
        ? window.innerHeight 
        : scroller.clientHeight;
    
      const scrollOptions = { 
        top: isPageUp ? (amount?-amount:(-pageHeight+overlap)) : (amount?amount:(pageHeight-overlap)),
        // behavior: 'smooth' // 按需开启
      };
    
      if (scroller === window) {
        window.scrollBy(scrollOptions);
      } else {
        scroller.scrollBy(scrollOptions);
      }
    }
    function getProtyleEl() {
        return document.querySelector('#editor') || document.querySelector(`.protyle[data-id="${[...document.querySelectorAll('.layout-tab-bar [data-type="tab-header"]')]
          .reduce((max, tab) => Number(tab?.dataset?.activetime) > Number(max?.dataset?.activetime || -1) ? tab : max, null)?.dataset?.id}"]`);
    }
    function whenElementExist(selector, node = document, timeout = 5000) {
        return new Promise((resolve, reject) => {
            const start = Date.now();
            function check() {
                let el;
                try {
                    el = typeof selector === 'function'
                        ? selector()
                        : node.querySelector(selector);
                } catch (err) {
                    return resolve(null);
                }
                if (el) {
                    resolve(el);
                } else if (Date.now() - start >= timeout) {
                    resolve(null);
                } else {
                    requestAnimationFrame(check);
                }
            }
            check();
        });
    }
    function isMobile() {
        return !!document.getElementById("sidebar");
    }
})();