夏目友人帐.
30/03/2018 作品
27/03/2018 友人
27/03/2018 关于

JavaScript 返回顶部实例

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;
}

文章作者:菜鸟教程

原文链接:http://www.runoob.com/w3cnote/js-to-top.html

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


已有 2 条评论


  1. 王叨叨

    其实我觉得,能不用js实现的尽量不要用js实现,返回顶部,一般用锚点就可以解决了

    王叨叨  2019年2月26日回复
    1. 夏目贵志

      我原来也是这么干的,但是确少用户体验

      反正jq那些我是不会用的2333

      夏目贵志 admin 2019年3月3日回复

发表新评论


最后更新于 2019 年 02 月 24 日.
Contact me at lvchuanxing@gmail.com. 回到顶部