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

本文介绍了一种简洁的纯CSS和JS实现返回顶部功能的方法。代码简单,无需额外引用JS文件,只需自定义注释即可定制样式。在页面滚动时,会在右下角显示返回顶部的按钮,点击后页面返回顶部并隐藏按钮。
摘要由CSDN通过智能技术生成

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

使用要求:

会看中文注释

优点:

  1. 代码简洁,只有一段css和一个js函数
  2. 无需引用其他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%;*/    /*修改背景图
  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值