在网上一搜返回顶部代码,基本上都是很复杂的,需要很多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%;*/ /*修改背景图