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实现返回顶部按钮的更多相关文章

  1. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

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

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...

  3. vue进入页面时不在顶部,检测滚动返回顶部按钮

    这里是本小白使用时遇到的问题及个人使用的方法可能并不完美. 1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll& ...

  4. 【Android】ListView监听上下滑动(判断是否显示返回顶部按钮

    设置滚动监听判断ListView的滚动方向同时获取屏幕高度.ListView实际高度,判断是否需要展示返回顶部按钮 package com.zihao.activity;   import java. ...

  5. 基于原生js的返回顶部组件,兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

  6. UWP 返回顶部按钮

    返回顶部的按钮,like this 当用户下滑了一定的距离之后,通常是快滑倒底部的时候,出现返回顶部按钮,当用户向上快滑,滑到顶部的时候,返回顶部按钮自动消失. 在UWP中,用来滚动内容的控件是Scr ...

  7. js网页返回顶部和楼层跳跃的实现原理

    这是简单的效果图. (实现楼层间的跳跃,主要依靠的是 window.scrollTo(x,y)方法 ,将浏览器的可见区域移动到指定的x,y坐标上.)   说楼层跳跃前,先温习下,一般网页在高度较大时, ...

  8. 在页面中有overflow-y:auto属性的div,当出现滚动条,点击返回顶部按钮,内容回这个div最顶部

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 使用jquery实现返回顶部按钮

    实现返回顶部效果,首先需要监听页面的scroll事件,其次才是获取到页面当前的滚动高度 $(window).scrollTop(); 具体代码如下: jquery获取页面元素的一些边界值(宽,高,滚动 ...

随机推荐

  1. TCP/IP协议三次握手_四次挥手

    TCP/IP协议 TCP是一种面向连接的端到端的可靠传输协议. TCP报头格式 三次握手的过程 一.客户端发送一个连接请求,发送一个随机数X,这时客户端的端口状态变为SYN_SENT状态. 二.服务端 ...

  2. Java 关键字详解

    Java 关键字是 Java 语言中被赋予特殊意义的一些单词(每个关键字都代表着不同场景下的不同含义),不可以把它当作标识符来使用(不能用作变量名.方法名.类名.包名和参数名等).Java 中的关键字 ...

  3. C# DeepClone 深拷贝

    常规利用反射进行克隆 public static T CloneModel<T>(T oModel) { var oRes = default(T); var oType = typeof ...

  4. Tomcat 服务器轻松部署 SSL 证书

    Tomcat 服务器 SSL 证书安装部署 1准备服务器 购买网上各个产家的云服务器 或者在自己的电脑上装虚拟机 二者皆可,建议选择第一种,因为操作起来相对方便 2安装JDK 2.1上传JDK到Lin ...

  5. GO学习-(36) Go语言在select语句中实现优先级

    Go语言在select语句中实现优先级 Go语言在select语句中实现优先级 select语句介绍 Go 语言中的 select语句用于监控并选择一组case语句执行相应的代码.它看起来类似于swi ...

  6. Go语言流程控制06--猜数字游戏

    package main import ( "fmt" "math/rand" "time" ) /* ·随机生成一个三位数 ·让用户输入其 ...

  7. 07.ElementUI 2.X 源码学习:源码剖析之工程化(二)

    0x.00 前言 项目工程化系列文章链接如下,推荐按照顺序阅读文章 . 1️⃣ 源码剖析之工程化(一):项目概览.package.json.npm script 2️⃣ 源码剖析之工程化(二):项目构 ...

  8. Azure DevOps(二)利用Azure DevOps Pipeline 构建基础设施资源

    一,引言 上一篇文章记录了利用 Azure DevOps 跨云进行构建 Docker images,并且将构建好的 Docker Images 推送到 AWS 的 ECR 中.今天我们继续讲解 Azu ...

  9. Camera Lens Coating

    Camera Lens Coating Coating Progress 转换镜头,根据要求进行OEM和设计. 光学元件:望远镜.显微镜.相机和数码相机镜头.放大镜头和远摄镜头.定心镜头.投影镜头.投 ...

  10. GraphX编程指南

    GraphX编程指南 概述 入门 属性图 属性图示例 图算子 算子摘要列表 属性算子 结构化算子 Join算子 最近邻聚集 汇总消息(a​​ggregateMessages) Map Reduce三元 ...