js实现返回顶部按钮
html:
<div class="box"></div>
<div class="box1"></div>
<div id="btn">
<img src="img/return.png" width="50px"height="40px">
</div>
css:
.box {
width: 100%;
height: 100px;
background: skyblue;
}
.box1 {
width: 100%;
height: 2000px;
background: lightgray;
}
#btn {
position: fixed;
right: 20px;
bottom: 50px;
border: none;
height: 30px;
width: 80px;
display: none;
}
js:
var oBtn=document.getElementById("btn")
window.onscroll=function () {
if (document.documentElement.scrollTop> 800) {
oBtn.style.display='block';
} else{
oBtn.style.display='none';
}
}
btn.onclick=function () {
document.documentElement.scrollTop='0'
}
js实现返回顶部按钮的更多相关文章
- js实现返回顶部功能的解决方案
很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...
- 前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...
- vue进入页面时不在顶部,检测滚动返回顶部按钮
这里是本小白使用时遇到的问题及个人使用的方法可能并不完美. 1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll& ...
- 【Android】ListView监听上下滑动(判断是否显示返回顶部按钮
设置滚动监听判断ListView的滚动方向同时获取屏幕高度.ListView实际高度,判断是否需要展示返回顶部按钮 package com.zihao.activity; import java. ...
- 基于原生js的返回顶部组件,兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
- UWP 返回顶部按钮
返回顶部的按钮,like this 当用户下滑了一定的距离之后,通常是快滑倒底部的时候,出现返回顶部按钮,当用户向上快滑,滑到顶部的时候,返回顶部按钮自动消失. 在UWP中,用来滚动内容的控件是Scr ...
- js网页返回顶部和楼层跳跃的实现原理
这是简单的效果图. (实现楼层间的跳跃,主要依靠的是 window.scrollTo(x,y)方法 ,将浏览器的可见区域移动到指定的x,y坐标上.) 说楼层跳跃前,先温习下,一般网页在高度较大时, ...
- 在页面中有overflow-y:auto属性的div,当出现滚动条,点击返回顶部按钮,内容回这个div最顶部
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用jquery实现返回顶部按钮
实现返回顶部效果,首先需要监听页面的scroll事件,其次才是获取到页面当前的滚动高度 $(window).scrollTop(); 具体代码如下: jquery获取页面元素的一些边界值(宽,高,滚动 ...
随机推荐
- 8.8-9 fsck、dd
8.8 fsck:检查并修复Linux文件系统 fsck命令用于检查并修复文件系统中的错误,即针对有问题的系统或磁盘进行修复,类似的命令还有e2fsck命令.有关fsck的使用需要特别注意的是: ...
- 04丨MongoDB特色及优势
- 按时按登录IP记录Linux所有用户操作日志的方法
背景:Linux用户操作记录一般通过命令history来查看历史记录,但是如果因为某人误操作了删除了重要的数据,这种情况下history命令就不会有什么作用了.以下方法可以实现通过记录登陆IP地址和所 ...
- Linux 使用命令发送邮件
1.关闭本机的sendmail服务或者postfix服务 #执行下面的命令,关闭sendmail和postfix服务 #sendmial [root@db-backup ~]# service sen ...
- TcaplusDB君 · 行业新闻汇编(5月25日)
TcaplusDB君一直密切关注着游戏行业和数据库行业的动态.以下是TcaplusDB君收集的近期的游戏行业和数据库行业的新闻,汇编整理,献给大家观看. (本篇文章部分内容来自网络) 第十一届中国数据 ...
- VMware vRealize Network Insight 6.2 发布 - 网络和安全可视化分析
发现.优化应用安全性和网络连接解决方案并对其进行故障排除 VMware vRealize Network Insight 可帮助您跨混合和多云环境构建经过优化且高度可用的安全网络基础架构.它提供了网络 ...
- Lidar激光雷达与Radar雷达
Lidar激光雷达与Radar雷达 自动驾驶技术正迅速成为汽车工业的驱动力.来自全球的汽车制造商正在与Google等顶级高科技巨头以及其他知名初创公司合作,共同开发下一代自动驾驶汽车.中国也开辟了自动 ...
- VB 老旧版本维护系列---兜兜转转有点晕:从服务器通过URL不中转保存的下载
从服务器通过URL不中转保存的下载 首先引用System.dll 然后新开一个页面,空的,在后台Page_Load方法里写 Dim docPath As String ="" ...
- Windows下Qt VS 打包程序 到他人电脑安装运行出现的问题
1.可能缺程序依赖的Qt动态库 ------> 使用Qt自带的windeployqt进入安装程序所在的文件夹内进行自动配置 将程序安装在C盘之外的盘,这样可以方便windeployqt ...
- Qt自定义信号槽的使用浅析+实例
1. Qt中自定义信号槽的使用 Qt框架提供的信号槽在某些特定场景下是无法满足我们的项目需求的,因此我们还设计自己需要的的信号和槽,使用connect()对自定义的信号槽进行连接. 如果想要使用自定义 ...