【原生js实现一键回到顶部】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.uptop {
position: fixed; /*//位置固定*/
bottom: -50px; /*//距离底部-50px，为了使一开始不显示*/
right: 10px; /*//距离右边10px*/
width: 50px;
z-index: 99; /*//为了使此部分位于整个页面的最上部分，不会被覆盖*/
-webkit-transition: all .5s; /*//设置改变bottom时的动画效果*/
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.uptop img {
width: 80%;
cursor: pointer;
}
ul li{
list-style: none;
width: 100px;
height: 20px;
border:1px solid red;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li><li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="uptop" id="uptop">
<img src="img/show.jpg" id="to-top">
</div>
</body>
<script>
window.onscroll = function() {
var t = document.documentElement.scrollTop || document.body.scrollTop; //获取距离页面顶部的距离
console.log(t);
var uptop = document.getElementById("uptop"); //获取div元素
if(t >= 260) { //当距离顶部超过300px时
uptop.style.bottom = 30 + 'px'; //使div距离底部30px，也就是向上出现
} else { //如果距离顶部小于300px
uptop.style.bottom = -50 + 'px'; //使div向下隐藏
}
}
var top = document.getElementById("to-top"); //获取图片元素
var timer = null;
top.onclick = function() { //点击图片时触发点击事件
timer = setInterval(function() { //设置一个计时器
var ct = document.documentElement.scrollTop || document.body.scrollTop; //获取距离顶部的距离
console.log(ct);
ct -= 10;
if(ct > 0) { //如果与顶部的距离大于零
window.scrollTo(0, ct); //向上移动10px
} else { //如果距离小于等于零
window.scrollTo(0, 0); //移动到顶部
clearInterval(timer); //清除计时器
}
}, 10); //隔10ms执行一次前面的function，展现一种平滑滑动效果
}
</script>
</html>
【原生js实现一键回到顶部】的更多相关文章
- js效果之回到顶部
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- js悬浮、回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js点击回到顶部2
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>点 ...
- js点击回到顶部
---恢复内容开始--- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 原生JavaScript实现页面回到顶部的功能
/*如果想实现点击一个按钮让滚动条回到最顶部的功能,首先可能就会想到它是从底部位置移动到顶部的位置 它是一个运动的过程,只要知道当前位置(current Position)和想要到达的位置(targe ...
- JS实现页面回到顶部效果
[代码] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 微信小程序中两种回到顶部按钮的效果实现
一,使用view形式的回到顶部HTML: <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}} ...
- 小程序scroll-view实现回到顶部
一.wxml页面:catchtap阻止冒泡事件. <view class="gotop" hidden='{{!cangotop}}'catchtap="goTop ...
- 微信小程序之回到顶部的两种方式
第一种:使用view标签形式回到顶部 WXML: <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstat ...
随机推荐
- 本地安装plsql和instantclient连接linux服务器端的oracle
当虚拟机里面的linux服务器安装好oracle之后(具体安装方法在之前的博客有说到),如何连接使用呢?连接过程中会出现什么问题呢? 1.首先我们下载instantclient的压缩包,直接解压就好, ...
- 忘记root密码---单用户模式进入及操作
修改root密码----------------单用户模式操作 个人原创博客,转载请注明,否则追究法律责任 1,开机后,迅速按下任意键 2,选择第二个:内核,按e 3,在quient后面按空格 1 或 ...
- NEO从入门到开窗(2) - 智能合约的面相
一.啰嗦两句 昨天讲了智能合约的一生,那丫长啥样啊?今儿我就跟各位唠叨唠叨. 二.一个简单的智能合约 下面这段就是NEO实例源码里的一个,干撒用的?聪明的你一眼儿就看出来了吧,就是一个所谓域名合约的增 ...
- Idea中开启assert断言
先打开相应的配置面板,有以下两种方式. 然后在VM栏里输入 -enableassertions 或者 -ea 就好了 然后编写程序试试 我的目录结构如下:(因为Main class那里要写类的全限 ...
- 剑指Offer-构建乘积数组
package Array; import sun.security.util.Length; /** * 构建乘积数组 * 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,... ...
- JS面向对象与面向过程
前言 面向对象编程: 就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与动作(方法)--这个对象就称之为类 面向过程编程: 特点:封装,就是将你需要的功能放在一个对象里面 ------ ...
- RabbitMQ的安装和配置
在Windows下进行rabbitMQ的安装 第一步:软件安装 如果安装rabbitMQ首先安装基于erlang语言支持的OTP软件,然后在下载rabbitMQ软件进行安装(安装过程都是下一步,在此不 ...
- 基于php编写的新闻类爬虫，插入WordPress数据库
这个爬虫写的比较久远,很久没有更新博客了. 1.首先思路是:通过php的curl_setopt()函数可以方便快捷的抓取网页. 2.什么样的新闻吸引人呢,当然的热点新闻了.这里选百度的搜索风云榜,获取 ...
- 云计算--网络原理与应用--20171123--网络地址转换NAT
NAT的概述 NAT的配置 实验 一. NAT的概述 NAT(Network address translation,网络地址转换)通过将内部网络的的私有地址翻译成全球唯一的共有网络IP地址,是内部网 ...
- 第六周PTA作业
第一题: #include<stdio.h> int main () { float a,b; scanf("%f %f\n",&a,&b); floa ...