原生js: 实现进入界面没有滚动条就不显示返回顶部图标, 当有滚动条后显示回到顶部图标, 点击图标回到顶部

问:

实现进入界面没有滚动条就不显示返回顶部图标, 当有滚动条后显示回到顶部图标, 点击图标回到顶部

回答:

<!-- 返回顶部 -->
    <div id="topButton" class="scroll-to-top" onclick="scrollToTop()">
      <svg t="1723087880675" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8892" width="1.0666666667rem" height="1.0666666667rem" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M511.998925 1024a519.00307 519.00307 0 0 1-52.31605-2.641914 512.469964 512.469964 0 0 1-50.872214-7.782384 508.599252 508.599252 0 0 1-183.080575-77.168478 514.763719 514.763719 0 0 1-75.775841-62.586749 517.835713 517.835713 0 0 1-62.515069-75.80656c-9.185261-13.598691-17.776603-27.740102-25.599946-42.219432s-15.103968-29.491138-21.555155-44.748706-12.287974-31.068095-17.213403-47.011741q-7.526384-24.176589-12.615654-49.018777a512.162764 512.162764 0 0 1-7.813104-50.790293 517.999552 517.999552 0 0 1 0-104.570661 512.285644 512.285644 0 0 1 7.782384-50.872213 508.599252 508.599252 0 0 1 77.168478-183.039616c9.226221-13.649891 19.0566-26.757064 29.511618-39.413677s21.503955-24.821708 33.075131-36.362164 23.78747-22.661072 36.382643-33.04441 25.825226-20.285397 39.423917-29.470658 27.740102-17.776603 42.219432-25.599946 29.491138-15.103968 44.748706-21.555155 31.068095-12.287974 47.011741-17.213404q24.176589-7.526384 49.018777-12.615654A512.213964 512.213964 0 0 1 459.775034 2.644065a518.081472 518.081472 0 0 1 104.560421 0 512.490444 512.490444 0 0 1 50.872213 7.782384 508.599252 508.599252 0 0 1 183.049856 77.168477 514.763719 514.763719 0 0 1 75.775841 62.586749 517.835713 517.835713 0 0 1 62.515068 75.806561c9.185261 13.598691 17.776603 27.740102 25.599946 42.219431s15.103968 29.491138 21.555155 44.748706 12.287974 31.068095 17.213404 47.011741q7.526384 24.176589 12.615654 49.018778a512.316364 512.316364 0 0 1 7.761903 50.769813 517.968832 517.968832 0 0 1 0 104.56042 512.388044 512.388044 0 0 1-7.782383 50.872214q-5.119989 24.831948-12.646374 49.069976-7.464944 23.93083-17.244124 47.042462-9.7075 22.886352-21.596114 44.758946t-25.681866 42.209191q-13.721571 20.398037-29.450178 39.362477a514.25172 514.25172 0 0 1-69.457775 69.406575c-12.595174 10.383338-25.825226 20.285397-39.434157 29.470658s-27.740102 17.776603-42.219431 25.599946-29.491138 15.103968-44.748706 21.555155-31.068095 12.287974-47.011741 17.213404q-24.176589 7.526384-49.018778 12.615653a512.152524 512.152524 0 0 1-50.769813 7.761904A518.450111 518.450111 0 0 1 511.998925 1024z m119.531269-428.43046v166.37917h25.733066v-72.970086h62.556028a32.153532 32.153532 0 0 0 32.174013-32.174013V627.712832a32.174012 32.174012 0 0 0-32.174013-32.194492z m-149.790406 0A32.184252 32.184252 0 0 0 449.535056 627.712832v102.010666a32.184252 32.184252 0 0 0 32.204732 32.174012h68.249457a32.153532 32.153532 0 0 0 32.184252-32.174012V627.712832a32.194492 32.194492 0 0 0-32.184252-32.194492z m-209.745479 0v25.753546h55.101324v140.625624h25.733066V621.323086h55.101324v-25.753546z m239.615497-342.711601l193.115754 193.146475 23.439311-23.439311-216.596025-216.565305-216.565306 216.555065 23.459791 23.449551 193.125995-193.156715z m38.399919 483.326985h-68.269937a6.399987 6.399987 0 0 1-6.420466-6.420466V627.712832a6.369267 6.369267 0 0 1 1.873916-4.54655 6.256627 6.256627 0 0 1 4.54655-1.884156h68.249457a6.143987 6.143987 0 0 1 4.526071 1.884156 6.318067 6.318067 0 0 1 1.904636 4.54655v102.010666a6.440946 6.440946 0 0 1-6.420467 6.420466z m169.830043-72.970086h-62.576508v-41.891752h62.556028a6.420467 6.420467 0 0 1 6.420467 6.430706v29.040579a6.399987 6.399987 0 0 1-6.420467 6.420467z" p-id="8893" fill="#3D97E7"></path></svg>
    </div>

// 显示或隐藏 返回顶部
      // 定义一个变量来标志是否正在执行 scrollToTop 函数
let isScrollingToTop = false;

// 滚动到顶部函数
function scrollToTop() {
    // 设置标志位，表示正在执行 scrollToTop 函数
    isScrollingToTop = true;

    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

    // 在一定时间后重置标志位，允许再次触发 handleSwipeUp 函数
    setTimeout(function() {
        isScrollingToTop = false;
    }, 300); // 这里的时间要与 debounce 函数中的 delay 保持一致
}



// 示例的 scrollFunction 函数（根据实际需要修改）
window.onscroll = function() {
    scrollFunction();
};

function scrollFunction() {
    var scrollButton = document.getElementById("topButton");
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        scrollButton.classList.add("show");
    } else {
        scrollButton.classList.remove("show");
    }
}