纯css+js打造返回顶部代码

在网上一搜返回顶部代码，基本上都是很复杂的，需要很多css和js文件。所以自己弄个简单的返回顶部代码，并记录一下。

使用要求：

会看中文注释

优点：

代码简洁，只有一段css和一个js函数
无需引用其他js文件

显示效果：

当滑动鼠标滚轮时，在浏览器右下角显示一个返回顶部的块，点击该显示块，返回浏览器顶部
返回顶部后隐藏显示块

有图有真相。。。

无背景图片样例
这里写图片描述

小火箭背景样例
这里写图片描述

下面是代码部分，只要自定义中文注释的地方就可以打造出各式各样的返回顶部样式了

css代码：

#returntop{
    display: none;
    width: 20px;     /*调整显示块的宽width和高height，用以适应文字或者图片的大小*/
    height: 70px;
    padding: 5px 0;
    /*background-image: url(1.png);*/     /*可用背景图片，更加美观*/
    background-color: #c2c2c2;            /*背景颜色*/
    background-repeat: no-repeat;
    /*background-position: 100% 50%;*/    /*修改背景图片在块中显示的位置*/
    position: fixed;
    _position: absolute;
    cursor: pointer;
}

javascript代码：

/*javascript函数，控制显示块的位置和显隐，此函数只要在body标签之间即可*/
var getDiv=document.getElementById('returntop');
getDiv.οnclick=function(){
    window.scrollTo(0,0);
}
window.οnscrοll=function(){
    if(document.documentElement.scrollTop){
        getDiv.style.display="block";
    }else if(document.body.scrollTop){
        getDiv.style.display="block";
    }else{
        getDiv.style.display="none";    
    }
}
function getWinSize(){
    var winHeight=window.innerHeight,winWidth=window.innerWidth;
    if(document.documentElement.clientHeight){
        winHeight=document.documentElement.clientHeight;
        winWidth=document.documentElement.clientWidth;
    }else{
        winHeight=document.body.clientHeight;
        winWidth=document.body.clientWidth;
    }
    getDiv.style.bottom=10+"px";     /*距离浏览器底部10px*/
    getDiv.style.right=100+"px";     /*距离浏览器右边框100px*/
    /*修改显示块的位置，有四个方向：top,bottom,left,right*/
}
getWinSize();
window.οnresize=getWinSize;

完整的html代码示例：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>回到顶部</title>
<style type="text/css">
#returntop{
    display: none;
    width: 20px;     /*调整显示块的宽width和高height*/
    height: 70px;
    padding: 5px 0;
    /*background-image: url(1.png);*/     /*可用背景图片*/
    background-color: #c2c2c2;            /*背景颜色*/
    background-repeat: no-repeat;
    position: fixed;
    _position: absolute;
    cursor: pointer;
}
</style>


</head>
<body>
<div style="height:2000px">这是顶部</div>
<div id="returntop">返回顶部</div>
<script type="text/javascript">
/*javascript函数，控制显示块的位置和显隐，此函数只要在body标签之间即可*/
var getDiv=document.getElementById('returntop');
getDiv.οnclick=function(){
    window.scrollTo(0,0);
}
window.οnscrοll=function(){
    if(document.documentElement.scrollTop){
        getDiv.style.display="block";
    }else if(document.body.scrollTop){
        getDiv.style.display="block";
    }else{
        getDiv.style.display="none";    
    }
}
function getWinSize(){
    var winHeight=window.innerHeight,winWidth=window.innerWidth;
    if(document.documentElement.clientHeight){
        winHeight=document.documentElement.clientHeight;
        winWidth=document.documentElement.clientWidth;
    }else{
        winHeight=document.body.clientHeight;
        winWidth=document.body.clientWidth;
    }
    getDiv.style.bottom=10+"px";  /*距离浏览器底部10px*/
    getDiv.style.right=100+"px";  /*距离浏览器右边框100px*/
    /*修改显示块的位置，有四个方向：top,bottom,left,right*/
}
getWinSize();
window.οnresize=getWinSize;
</script>
</body>
</html>

saltor

发布了25 篇原创文章 · 获赞 13 · 访问量 12万+

私信关注