javascript 滚动时如何显示向上按钮？

mwg9r5ms 于 2023-01-04 发布在 Java

关注(0)|答案(2)|浏览(148)

我有一个向上按钮。

我希望一开始不能看到向上按钮，但在滚动完成后才能看到。
我想用d-block替换d-none。

- 超文本标记语言**

<a href="#" class="position-fixed text-danger arrow-up d-none" id="scrollTop"><i class="fas fa-3x fa-chevron-circle-up"></i></a>

- 苏丹**

if (document.getElementById('scrollTop').scrollTop === 200) {
    document.getElementById('scrollTop').classList.add('d-block');
    document.getElementById('scrollTop').classList.remove('d-none');    
}

JavaScript

来源：https://stackoverflow.com/questions/74987624/how-to-show-up-button-when-scroll

2条答案

按热度按时间

f1tvaqid1#

侦听滚动事件。演示其工作原理的工作示例：

const myID = document.getElementById("myID");

var myScrollFunc = function () {
    var y = window.scrollY;
    if (y >= 800) {
        myID.className = "bottomMenu show"
    } else {
        myID.className = "bottomMenu hide"
    }
};

window.addEventListener("scroll", myScrollFunc);

body {
    height: 2000px;
}
.bottomMenu {
    position: fixed;
    bottom: 10px;
    right: 10px;
    color: white;
    width: 50px;
    height: 60px;
    border-top: 1px solid #000;
    background: red;
    z-index: 1;
    transition: all .5s;
}
.hide {
    opacity:0;
   
}
.show {
    opacity:1;
  
}

<div id="myID" class="bottomMenu hide">top</div>

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

j1dl9f462#

你应该把你的代码放在类似这样的地方：

document.addEventListener('scroll', () => {... your code ...})

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

我来回答

javascript 滚动时如何显示向上按钮？

2条答案

相关问题

热门标签

最新问答