【原生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 ...
随机推荐
- 简单的同步Socket程序服务端
首先,Socket是.Net提供的 System.Net.Sockets命名空间的Scoket类为网络通信提供了一套丰富的方法和属性 服务器按照Socket的基本流程 先创建Socket 在用Bind ...
- Mycat 安装与启动
环境准备 安装JDK1.8(必须JDK1.7及更高版本) 安装MySQL 服务安装与说明 下载 MyCAT 编译好的安装包,下载地址为 http://dl.mycat.io/1.6-RELEASE/ ...
- window7 安装sass和compass
官网有详细的介绍,但是安装时候还是出现了一些小问题. 首先下载Rudy,然后根据提示勾选加入环境变量,由于第一次使用,我就选择了" msys2 base installlation" ...
- mysql主从复制安装详解
1.环境准备:两台Linux6.8服务器,(可以通过yum安装mysql:yum install mysql mysql-server -y,安装的版本可能比较低,对于练手来说够用了 )主库ip:19 ...
- Linux chgrp命令
在lunix系统里,文件或目录的权限的掌控以拥有者及所诉群组来管理.可以使用chgrp指令取变更文件与目录所属群组,这种方式采用群组名称或群组识别码都可以.Chgrp命令就是change group的 ...
- 阿里图标库iconfont入门使用
目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...
- 新手立体四子棋AI教程(2)——价值评估函数
上一篇我们完成了整个程序的基础框架,那么在讲到真正的搜索算法前,我们先来看看五子棋如何评估当前局势,以及如何计算某个位置的价值. 一.五子棋 在五子棋中,包括成五,活三,活二等定势,下图为山东师范大学 ...
- 设计模式之 原型模式详解（clone方法源码的简单剖析）
作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 原型模式算是JAVA中最简单 ...
- 关于yaml语言
yaml语言广泛用于书写配置文件. 主要特点如下: 1.使用缩进表示层级关系,缩进使用空格键(非Tab键) 2.缩进的空格数目不要求,只要相同层级的元素左侧对其即可 3.#之后的内容为注释 4.yam ...
- 04_Python的数据类型1数值和字符串_Python编程之路
上一节我们通过一个helloworld程序学习python的一些简单操作,还有输入与输出 这节我们来讲Python的数据类型与变量的操作 Python的交互器 在讲这个之前,我要先讲一下python的 ...