JavaScript 返回顶部实例

本章节为大家介绍如何通过 JS/CSS 实现网页返回顶部效果。

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() {
    console.log(121);  
    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;
}

Shell 中的特殊字符：；分号连续运行命令# ifdown eth0;ifup eth0| 管道正则表达式中表示或者 # echo "ooooee" |egrep '(oo|ee)'{2} 表示匹配 oooo 或者 eeee 的字符前面命 ...