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获取页面元素的一些边界值(宽,高,滚动 ...
随机推荐
- 攻防世界(十一)warmup
攻防世界系列 :warmup 1.打开题目,一个贱贱的滑稽表情 F12看到注释内容source.php 2.访问source.php <?php highlight_file(__FILE__) ...
- Ubuntu 18.04安装 Adob Flash player
1.Ctrl + Alt + T 打开命令终端,启用Canonical Partners Repository存储库 (最新的Flash插件位于Canonical Partners的存储库中,默认情况 ...
- Lua的string库函数列表
基本函数 函数 描述 示例 结果 len 计算字符串长度 string.len("abcd") 4 rep 返回字符串s的n个拷贝 string.rep("abcd&qu ...
- 云原生ASP.NET Core程序的可监测性和可观察性
分布式应用程序很复杂,给开发人员调试和修复生产问题带来了一系列挑战.尽管微服务架构可帮助维持一支规模较小,可以自主工作并专注于独立业务团队,但由于其分布式性质,它带来了新的挑战.例如,在业务交易过程中 ...
- 由Chromium内核引起的微信内置浏览器rce漏洞复现
背景 chrome浏览器爆出漏洞,github上公开了poc:https://github.com/r4j0x00/exploits/tree/master/chrome-0day,在关闭chrome ...
- Python中字符串转换列表
前言:在使用Python完成工作中一些任务的时候,常常要对数据类型进行转换,比如字符串转列表,列表转字符串,字符串转元组等等,下面分享一下常用的字符串转列表 字符串转列表 第一种字符串转列表: t_s ...
- 第一天:python学习-基础-计算机简史
第一天:计算机简史 1.元始的计算方式 : 1.1:数手指头,结绳记事.符号记事.算筹(祖冲之-圆周率).算盘:计算效率较低. 1.2:15世纪航海活动各天文需求 计算比较繁重,出现计算尺工具,奥特雷 ...
- kotlin知识点
主构造函数里的参数,如果不声明为var或者val,则这个参数一般是用来初始化父类.它不算是这个类的字段,它的作用域只在主构造函数当中. val 的对象不仅数据不能变, 引用也不能变. //自定义的类似 ...
- 详述盒子模型(包含padding、border、margin的详细用法和描述)
提起盒子模型,我想无论是对于一个前端资深开发人员还是前端入门开发人员来说都不陌生,这是CSS最基础的知识. 但是惭愧地说,我之前理解的盒子模型,只是文字上的理解.我知道定义一个元素的宽度和高度时,设置 ...
- guava cache 缓存
1.guava缓存 新建一个缓存对象cache,当取不到key对应的值时,生成一个,并插入到cache中 LoadingCache<String,String> cache = Cache ...