纯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.onclick=function(){window.scrollTo(0,0);
}
window.onscroll=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.onresize=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.onclick=function(){window.scrollTo(0,0);
}
window.onscroll=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.onresize=getWinSize;
</script>
</body>
</html>

纯css+js打造返回顶部代码相关推荐

前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button οnclick="returnTop()& ...
纯CSS实现带返回顶部右侧悬浮菜单
这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html><head> ...
jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
教你网站怎么添加返回顶部代码?
网站添加返回顶部有好几种,下面我简单介绍下: 1 使用文字添加方法最简单的是:最简单的"返回顶部"代码就是"<a href="javascript:scr ...
css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
漂亮纯css蓝白色横向导航条代码
漂亮纯css蓝白色横向导航条代码展示图如下: 详细代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
网页中返回顶部代码(多种方法)另附注释说明
下面就说下简单的返回顶部效果的代码实现,附注释说明,最简单的静态返回顶部,点击直接跳转页面顶部及用js模拟滚动效果上滑至顶部下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返 ...
简单返回顶部代码及注释说明（转）
最近做了一个排行榜页面,分类较多,并且以图文形式展示......最后页面明显过长了,用户体验自然不够好.最后想着在页面上部增加了页面内跳转导航,直接导航到本页的分类命名锚块.当然这就需要结合" ...
js 做返回顶部效果
涉及的知识点: font-awesome字体图标:使用的cdn. window.onload 窗口加载完成事件:如果js代码写在body标签之前,则所有的js都要写在window.onload的事件中 ...
返回顶部php代码,网页中返回顶部代码(多种方法)另附注释说明_jquery
下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能方法一:用命名锚点击返回到顶部预设的id为top的元素 f ...

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

使用要求：

优点：

显示效果：

css代码：

javascript代码：

完整的html代码示例：

纯css+js打造返回顶部代码相关推荐

最新文章

热门文章