前端 css+js实现返回顶部功能

news/2024/7/5 1:53:32

描述:

       本文主要是讲,通过css+js实现网页中的【返回顶部】功能。

 

实现代码:

HTML:

1 <div>
2     <button οnclick="returnTop()" id="btnTop" title="返回顶部">返回顶部</button>
3 </div>

 

CSS:

 1 /* return top */
 2 #btnTop {
 3   display: none;
 4   position: fixed;
 5   bottom: 20px;
 6   right: 30px;
 7   z-index: 99;
 8   border: none;
 9   outline: none;
10   background-color: #89cff0;
11   color: white;
12   cursor: pointer;
13   padding: 15px;
14   border-radius: 10px;
15 }
16 #btnTop:hover {
17   background-color: #1E90FF;
18 }

 

JS:

 1 // 当网页向下滑动 20px 出现"返回顶部" 按钮
 2 window.onscroll = function() {
 3     scrollFunction()
 4 };
 5  
 6 function scrollFunction() {
 7     console.log(121);
 8     if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 9         document.getElementById("btnTop").style.display = "block";
10     } else {
11         document.getElementById("btnTop").style.display = "none";
12     }
13 }
14  
15 // 点击按钮,返回顶部
16 function returnTop() {
17     document.body.scrollTop = 0;
18     document.documentElement.scrollTop = 0;
19 }

 

 

如果您看了本篇博客,觉得对您有所收获,请点击右下角的 [推荐]

如果您想转载本博客,请注明出处

如果您对本文有意见或者建议,欢迎留言

感谢您的阅读,请关注我的后续博客


http://www.niftyadmin.cn/n/4771159.html

相关文章

访问iframe页面session过期后跳转到登录页的问题

在MVC中一般都会封装BaseControl 来限制 是否有权限&#xff0c;登录 public class BaseController : Controller{public system_user LoginUser{ get; set; }protected override void OnActionExecuting(ActionExecutingContext filterContext){bool IsExt false;object obj …

SQL执行错误 错误消息:SQL Server检测到基于一致性的逻辑I/O错误

--1.设置数据库为单用户模式(会立即断开其他所有用户的连接) ALTER DATABASE YourDatabaseName SET SINGLE_USER WITH ROLLBACK IMMEDIATE; GO--2.修复数据库(允许数据丢失) DBCC CHECKDB (YourDatabaseName, REPAIR_ALLOW_DATA_LOSS)--3.单用户模式关闭(多用户模式开启) ALTER…

Windows 系统 安装SCons

1. 安装python2.7或以上版本&#xff0c;执行python2.x的安装包程序python-2.7.12.amd64.msi进行安装即可 2. 安装scons 下载scons-3.0.4.zip压缩包并解压缩&#xff0c;&#xff08;http://sourceforge.net/projects/scons/files/scons/2.3.2/&#xff09; CMD下进入解压后的…

window下 vs2017-- boost 编译及使用

boost的编译和使用&#xff0c;经过搜集资料和总结&#xff0c;记录成文。感谢文后所列参考资料的作者。 1 下载 地址&#xff1a;http://sourceforge.net/projects/boost/files/boost/1.56.0/ 可以选择 boost_1_56_0.7z 下载。 2 编译 2.1 生成boost的自用的编译工具bjam…

Microsoft Word 2016 VBA开发 通过脚本实现表格内显示、隐藏一行注释

背景 曾经的同事微信求助&#xff0c;在一个类似问卷的docx文件中的某个Table内&#xff0c;分别放入两个按钮&#xff1a;显示、隐藏&#xff0c;用于指导用户进行表格填写 方法 1. 创建一个docm文件&#xff0c;并启用宏 2. 在Visual Basic编辑器中插入如下代码 Public Sub S…

手机号归属地 查询

1、http://www.guisd.com 目前测试 有些号段无法查询出结构 2、http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel*** 3、https://www.juhe.cn/docs/api/id/72 需注册 免费 1000次/天 4、http://www.114best.com/dh/114.aspx?w百事通

SQL Server去重取所有列方式

select * from table where id in (select max(id) from table group by [去除重复的字段名列表,....])

shell配置java环境变量和批处理配置环境变量

linux配置java环境只需在/etc/profile中添加以下 前提是把jdk解压到/usr/local路径&#xff0c;当然路径可以随便改 export JAVA_HOME/usr/local/jdk1.7.0_79export JAVA_BIN$JAVA_HOME/binexport PATH$PATH:$JAVA_BINexport CLASSPATH$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/to…