【原生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 ...
随机推荐
- Firefox配置文件夹详解
参考此文会帮助你更好的管理和备份Firefox配置文件,此文没有列出的文件大多是Firefox运行时生成的一些随机文件,大多无用,备份或管理配置文件时酌情删除. 在地址栏输入about:support ...
- Windows Live Writer 2014版绿色版制作及主题获取
前年才建好博客的时候就尝试用Windows Live Writer(WLW)写博客,用的是直接在网上找到的一个WLW 2009绿色美化版.但因为当时WLW获取的博客主题是主页的,预览的时候特别不爽,就 ...
- 敏感词过滤，js封装class选择器：
敏感词过滤: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 笔记：Jersey REST 传输格式-JSON
JSON 类型已经成为Ajax技术中数据传输的实际标准,Jersey 提供了多种处理JSON数据的包和解析方式,下表展示了JSON包和解析方式: 解析方式\JSON支持包 MOXy JSON-P Ja ...
- Object的方法
1.Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. ES2015引入的 ,且可用polyfilled.要支持旧浏览器的话,可用使用jQ ...
- 前端的UI设计与交互之字体篇
跨平台的字体设定,力求在各个操作系统下都有最佳展示效果.字体是界面设计中最重要的基本构成之一,用户通过文本来消化内容和完成工作,优雅的字体将大大提升用户的阅读体验及工作效率.在满足不同终端始终保持良好 ...
- 【Python】 垃圾回收机制和gc模块
垃圾回收机制和gc模块 Py的一个大好处,就是灵活的变量声明和动态变量类型.虽然这使得学习py起来非常方便快捷,但是同时也带来了py在性能上的一些不足.其中相关内存比较主要的一点就是py不会对已经销毁 ...
- 云计算 --> 三种服务模式IaaS,PaaS,SaaS
三种服务模式IaaS,PaaS,SaaS “云”其实是互联网的一个隐喻,“云计算”其实就是使用互联网来接入存储或者运行在远程服务器端的应用,数据,或者服务.任何一个使用基于互联网的方法来计算,存储和开 ...
- 基于docker 部署 canvas-lms
准备: 一台8G内存的服务器.安装好docker, pull一个ubuntu镜像下来, 可以是最新版也可以是官方支持的14/ 16 Step 1: 启动docker容易加载ubuntu镜像.命令如下 ...
- 如何正确使用Java异常处理机制
文章来源:leaforbook - 如何正确使用Java异常处理机制作者:士别三日 第一节 异常处理概述 第二节 Java异常处理类 2.1 Throwable 2.1.1 Throwable有五种构 ...