h5页面如何根据鼠标滑轮滚动实现透明度的渐变

Question

比如制作一个固定在浏览器视窗的回到顶部按钮，当浏览器向下滑动到一定高度时，按钮逐渐显示，当浏览器往上走时，按钮逐渐透明

Answer 1

监听div的滚动事件，获取e.target.scrollTop（滚动距离），然后写点判断条件就行了

    let box=document.getElementById('box')
    box.addEventListener('scroll', function(e){

        var scrollTop =e.target.scrollTop;
        let number=1-(scrollTop-300)/300
        
        let button=document.getElementById('button')
        button.style.opacity=number

    });