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获取页面元素的一些边界值(宽,高,滚动 ...
随机推荐
- C语言规范:C89、C90、C95、C99
本文转载 [K&R C] 1978 年,Dennis Ritchie 和 Brian Kernighan 合作推出了<The C Programming Language>的第一版 ...
- Centos7 搭建vsftpd
1.安装vsftpd 在线安装:yum -y install vsftpd 离线安装:下载vsftp的rpm包,通过rpm -ivh xxx.rpm安装 2.修改/etc/vsftpd/vsftpd. ...
- 在pycharm进行单元测试(unittest python)
在Edit Configuration中添加Python test 选中相应的脚本或者文件夹 # coding:utf-8 import unittest import requests from c ...
- JDK8中Stream使用解析
JDK8中Stream使用解析 现在谈及JDK8的新特新,已经说不上新了.本篇介绍的就是Stream和Lambda,说的Stream可不是JDK中的IO流,这里的Stream指的是处理集合的抽象概念『 ...
- Task类学习教程—组合任务ContinueWith
Task类学习教程-组合任务.ContinueWith 一.简介 通过任务,可以指定在任务完成之后,应开始运行之后另一个特定任务.ContinueWith是Task根据其自身状况,决定后续应该作何操作 ...
- Python+Selenium - 下拉列表处理
下拉列表分两种:select下拉表和非select下拉表. 1.select下拉列表 如下图元素代码展示 可用Select类处理 from selenium.webdriver.support.sel ...
- java中的Class.forName的作用
Class.forName有什么作用 Class.forName(xxx.xx.xx) 返回的是一个类 首先你要明白在java里面任何class都要装载在虚拟机上才能运行.这句话就是装载类用的(和ne ...
- Eclipse从SVN中检出项目缺少Jar包的问题
Eclipse从SVN中检出项目缺少Jar包的问题
- CVPR2020最新论文扫描盘点(上)
CVPR2020最新论文扫描盘点(上) 最近计算机视觉三大顶会之一CVPR2020接收结果已经公布,一共有1470篇论文被接收,接收率为22%,相比去年降低3个百分点,竞争越来越激烈.这里整理来自Tw ...
- TensorRT PoolingLayer
TensorRT PoolingLayer IPoolingLayer在通道中实现池.支持的池类型有maximum.average和maximum average混合. Layer Descripti ...