【原生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 ...
随机推荐
- 九度OJ题目1003：A+B
while(cin>>str1>>str2)就行了,多简单,不得不吐槽,九度的OJ真奇葩 题目描述: 给定两个整数A和B,其表示形式是:从个位开始,每三位数用逗号", ...
- centos6上yum安装drbd（内核：2.6.32.696）
author:headsen chen date: 2017-11-20 15:11:21 notice: 个人原创,转载请注明,否则依法追究法律责任 前期准备: 两台机器:配置主机名分别为: l ...
- Flask入门HelloWorld
Flask入门HelloWorld Flask官网:http://flask.pocoo.org/ Flask中文翻译:http://dormousehole.readthedocs.io/en/la ...
- 1.Java关键字和保留字
关键字和保留字 http://www.cnblogs.com/wwxbi/p/4292170.html 访问控制 private protected public 类,方法和变量修饰符 abstrac ...
- bootbox的使用
/* * className为green的方法 */ function alertMsgG(msg,title,fn){ bootbox.alert({ buttons: { ok: { label: ...
- Day4----------用户、群组、权限
一.创建用户 命令:useradd 详细信息: root:x:0:0:root:/root:/bin/bash 总共七位 tom:x:500:500: :/home/tom:/bin/bash 1.r ...
- ELK学习笔记（三）单台服务器多节点部署
一般情况下单台服务器只会部署一个ElasticSearch node,但是在学习过程中,很多情况下会需要实现ElasticSearch的分布式效果,所以需要启动多个节点,但是学习开发环境(不想开多个虚 ...
- 【Python】 xml转json
虽然python有解析xml的模块,也有生成json的模块,但是没有把这两者连接起来的模块. 下面是以来自MIT的大神Martin Blech写的一个方便的模块,供大家参考.也别忘了在用之前先拜谢作者 ...
- JavaOOP-继承
继承 1.继承的概念 继承是类与类之间的关系,是一个很简单很直观的概念,与现实世界中的继承(例如儿子继承父亲财产)类似. 继承可以理解为一个类从另一个类获取方法和属性的过程.如果类B继承于类A,那么B ...
- 转载--MYSQL5.7：Access denied for user 'root'@'localhost' (using password:YES)解决方法
1.打开MySQL目录下的my.ini文件,在文件的最后添加一行"skip-grant-tables",保存并关闭文件; 2.重启MySQL服务; 3.通过cmd行进入MySQL的 ...