网页中"返回顶部"的实现

2019-02-13  本文已影响0人  Toplhyi

定义返回顶部按钮的css样式如下(可以根据需要自己调整):

#myBtn {    
        display: none; /* 默认隐藏 */    
        position: fixed;    
        bottom: 20px;    
        right: 30px;    
        z-index: 99;    
        border: none;    
        outline: none;    
        background-color: red; /* 设置背景颜色,你可以设置自己想要的颜色或图片 */   
        color: white; /* 文本颜色 */    
        cursor: pointer;    
        padding: 15px;    
        border-radius: 10px; /* 圆角 */
} 
#myBtn:hover {    
        background-color: #555; 
}

添加js代码:

// 当网页向下滑动 20px 出现"返回顶部" 按钮
window.onscroll = function() { 
        scrollFunction()
}; 
function scrollFunction() { 
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {        
                document.getElementById("myBtn").style.display = "block";    
        } else {
                document.getElementById("myBtn").style.display = "none";    
        }
}

// 点击按钮,返回顶部
function topFunction() { 
        document.body.scrollTop = 0;    
        document.documentElement.scrollTop = 0;
}
上一篇 下一篇

猜你喜欢

热点阅读