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获取页面元素的一些边界值(宽,高,滚动 ...
随机推荐
- FOC_矢量控制相关资料
http://www.eepw.com.cn/news/listbylabel/label/FOC/ FOC(field-oriented control)为磁场导向控制,又称为矢量控制(vector ...
- Java并发:ThreadLocal的简单介绍
作者:汤圆 个人博客:javalover.cc 前言 前面在线程的安全性中介绍过全局变量(成员变量)和局部变量(方法或代码块内的变量),前者在多线程中是不安全的,需要加锁等机制来确保安全,后者是线程安 ...
- 解决Maven资源过滤问题
向pom文件添加如下配置 <build> <resources> <resource> <directory>src/main/java</dir ...
- python 定时任务APScheduler 使用介绍
python 定时任务APScheduler 使用介绍 介绍: APScheduler的全称是Advanced Python Scheduler.它是一个轻量级的 Python 定时任务调度框架. ...
- openresty 学习笔记六:使用session库
openresty 学习笔记六:使用session库 lua-resty-session 是一个面向 OpenResty 的安全和灵活的 session 库,它实现了 Secure Cookie Pr ...
- Tengine Framework基础
Tengine Framework基础 最受开发者喜爱的边缘AI计算框架 Tengine是OPEN AI LAB推出的自主知识产权的边缘AI计算框架,致力于解决AIoT产业链碎片化问题,加速AI产业化 ...
- KITTI数据集上MaskRCNN检测效果示例
KITTI数据集上MaskRCNN检测效果示例 在Semantic Instance Segmentation Evaluation中,MaskRCNN性能效果排名第一. Test Image 0 I ...
- ffmpeg architecture(上)
ffmpeg architecture(上) 目录 介绍 视频-您看到的是什么! 音频-您在听什么! 编解码器-缩小数据 容器-音频和视频的舒适场所 FFmpeg-命令行 FFmpeg命令行工具101 ...
- 一枚通过参数污染绕过百度RASP的XSS
日常工作过程中,偶然发现一个网站登录页面,在页面返回包中存在一个隐藏参数"mess",且该页面部署了百度RASP进行防护,本文介绍如何发现隐藏参数以及如何通过参数污染方式造成XSS ...
- Appium_adb常用命令总结
以下为在工作学习过程中总结的常用的adb命令,用来做后续参考和查阅: 一.常用命令 显示当前运行的全部模拟器: adb devices 安装应用程序: adb install 应用程序.apk 备注 ...