原生JavaScript实现返回顶部功能

来源:互联网 发布:淘宝卖家怎么隐藏差评 编辑:程序博客网 时间:2024/05/05 15:54
将下面代码保存为js文件,然后在需要用到的页面添加js引用即可。
//--------------------------------------------------------------------------------// 文件描述:返回顶部脚本 // 文件作者:zhangqs// 创建日期:2017-5-19 11:11:43// 修改记录: //--------------------------------------------------------------------------------window.onload = function () {    //样式控制    writecss("#_goTop{position: fixed;bottom: 20px;right: 20px;cursor: pointer;}");    //创建元素    var div = document.createElement("div");    div.id = "_goTop";    div.innerHTML = "<img src='http://img.lanrentuku.com/img/allimg/1206/5-120601160010-50.png'/>";    document.body.appendChild(div);    //控制显示和隐藏    var top = document.getElementById("_goTop");    top.style.display = "none";    window.onscroll = function () {        var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;        if (scrolltop > 300) {            top.style.display = "block";        } else {            top.style.display = "none";        }    };    //点击返回顶部    top.onclick = function () {        document.documentElement.scrollTop = document.body.scrollTop = 0;    };};//写入css样式function writecss(cssText) {    var style = document.createElement('style'), head = document.head || document.getElementsByTagName('head')[0];    style.type = 'text/css';    if (style.styleSheet) {        var func = function () {            try {                style.styleSheet.cssText = cssText;            } catch (e) {            }        };        if (style.styleSheet.disabled) {            setTimeout(func, 10);        } else {            func();        }    } else {        var textNode = document.createTextNode(cssText);        style.appendChild(textNode);    }    head.appendChild(style);} 

原创粉丝点击