javascript 我试图添加一个返回到“顶部”按钮/功能的侧滚动页面，但它是不像往常一样重新出现,这可能吗？

r1zhe5dt 于 2023-04-28 发布在 Java

关注(0)|答案(1)|浏览(96)

首先，我确实发现了一个类似的问题，但它对我正在做的事情没有帮助。我试图添加一个返回到“顶部”按钮的页面是一个横向滚动页。轴只是反转，所以我会假设它仍然会像正常的返回顶部按钮一样起作用，因为它本质上是滚动相同的轴。按钮正常显示，直到我设置显示：没有。在那之后，我一直无法使它在滚动页面后重新出现。目前已设置为显示〉30。我已经包括了html，css和js，到目前为止我已经尝试过了。
HTML和js（位于body内部）

<button onclick="returnToStartFunction()" id="toStart" title="Return to Start">&#8656;</button>

<script>
    let startButton = document.getElementById("toStart");

    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {
            startButton.style.display = "block";
        } else {
            startButton.style.display = "none";
        }
    }

    function returnToStartFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>

CSS

/*
Start styling for return to start arrow.
*/

#toStart {
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 0.5rem;
    font-size: 65px;
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.25);
    backdrop-filter: blur(5px);
    border: none;
    border-radius: 8px 0 0 8px;
    outline: none;
    z-index: 999;
}

#toStart:hover {
    background-color: rgba(30,101,49);
}

/*
End styling for return to start arrow.
*/

JavaScript

来源：https://stackoverflow.com/questions/76116298/i-am-attempting-to-add-a-return-to-top-button-function-for-a-side-scrolling-pa

1条答案

按热度按时间

hgtggwj01#

你的剧本不错。而是在机身上设置位置关系或翘曲曲面。而主要内容有高度（feat.某些文本或最小高度等。..）

let startButton = document.getElementById("toStart");

    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {
            startButton.style.display = "block";
        } else {
            startButton.style.display = "none";
        }
    }

    function returnToStartFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }

body{
  position:relative;  
  background:skyblue;
}
#toStart {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 0.5rem;
    font-size: 65px;
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.25);
    backdrop-filter: blur(5px);
    border: none;
    border-radius: 8px 0 0 8px;
    outline: none;
    z-index: 999;
}

#toStart:hover {
    background-color: rgba(30,101,49);
}

<body>
  <div class="main-cont">
    content<br><br><br><br><br>content<br><br><br><br><br>content<br><br><br><br><br>content<br><br><br><br><br>content<br><br><br><br><br>content<br><br><br><br><br>content<br><br><br><br><br>content<br><br><br><br><br>content<br><br><br><br><br>content<br><br><br><br><br>content<br><br><br><br><br>content<br><br><br><br><br>content<br><br><br><br><br>content<br><br><br><br><br>content<br><br><br><br><br>content<br><br><br><br><br>content<br><br><br><br><br>
  </div>
  <button onclick="returnToStartFunction()" id="toStart" title="Return to Start">&#8656;</button>
<body>

赞(0）回复(0）举报 2023-04-28

我来回答

javascript 我试图添加一个返回到“顶部”按钮/功能的侧滚动页面，但它是不像往常一样重新出现,这可能吗？

1条答案

相关问题

热门标签

最新问答