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. 二进制格式安装MySQL

    二进制格式安装MySQL 下载二进制格式的mysql软件包 下载二进制格式的 mysql 软件包 [root@localhost ~]# cd /usr/src/ [root@localhost sr ...

  2. OpenStack常见面试题

    现在,大多数公司都试图将它们的 IT 基础设施和电信设施迁移到私有云, 如 OpenStack.如果你打算面试 OpenStack 管理员这个岗位,那么下面列出的这些面试问题可能会帮助你通过面试. Q ...

  3. DOS 命令大全用法详解

    注意事项 DOS命令不区分大小写,比如C盘的Program Files,在dos命令中完全可以用"program files"代替,加上英文引号是因为名称的中间有空格(即多于一个词 ...

  4. centos更新git

    安装完centos 7后默认的git版本为1.8,有些软件需要更新版本的git,但是在yum库中并没有更高的git版本,所以需要下载安装包进行手动安装,git下载地址:https://git-scm. ...

  5. Django(41)详解异步任务框架Celery

    celery介绍   Celery是由Python开发.简单.灵活.可靠的分布式任务队列,是一个处理异步任务的框架,其本质是生产者消费者模型,生产者发送任务到消息队列,消费者负责处理任务.Celery ...

  6. Jenkins 入门介绍

    一.概念 近几年,DevOps理念一致处于一个比较热门的状态.我每个月在工作群或者技术交流群都会看到这个名词出现.前年,当我第一次看到这个"DevOps",我压根不知道这是一个什么 ...

  7. GO文件读写01---读文件

    打开文件 package main import ( "fmt" "os" ) /* buffer 缓冲区 utility 便利的工具 util 便捷工具(傻瓜 ...

  8. ADAS可行驶区域道路积水反光区域的识别算法

    ADAS可行驶区域道路积水反光区域的识别算法 Water logging area reflecting recognition algorithm for ADAS 1. 工程概要 1.1  概述: ...

  9. DMS是临时解决方案?

    DMS是临时解决方案? Who Says DMS Is an Interim Solution? 现在是认真对待DMS驱动程序监控系统的时候了. 特斯拉(Tesla)在台湾高速公路上撞上翻倒卡车的镜头 ...

  10. Python_selenium页面元素整合设计经验