【原生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 ...
随机推荐
- 5分钟学习spark streaming 表格和图形化的文档-概览
看图回答以下问题: 1. spark streaming 架构以及功能特性 2. spark streaming mode?以及每个mode主要特性?包括延迟和语义保证.
- 支持Touch ID！EOS 项目进展速报
Daniel Larimer 周六在 Steemit 上向大家介绍了 EOS 项目的最新进展,惊喜不少. 原文链接 : https://steemit.com/eosio/@dan/eos-io-de ...
- AngularJs踩过的坑
1. 使用checkbox和radio时, 不能使用ng-model直接绑定原始对象, 需要绑定一个对象的某个子属性, 才能把值绑定到scope <label><input type ...
- JAVAEE——BOS物流项目08：配置代理对象远程调用crm服务、查看定区中包含的分区、查看定区关联的客户
1 学习计划 1.定区关联客户 n 完善CRM服务中的客户查询方法 n 在BOS项目中配置代理对象远程调用crm服务 n 调整定区关联客户页面 n 实现定区关联客户 2.查看定区中包含的分区 n 页面 ...
- AngularJS复习------表单验证
在AngularJS中能够将HTML5表单验证功能同自己的验证指令结合起来使用,这里介绍使用的核心功能. 使用表单验证,首先要确保表单的每个控件都有name属性 如果想要屏蔽浏览器对表单的默认验证行为 ...
- 实现Canvas2D绘图 使元素绕中心居中旋转
我之前用canvas写了个头像剪切的demo,但是关于让载入的图片旋转是个问题,虽然通过其它方法实现了,但是感觉并不太好,于是查了些资料,想试着重新做一下canvas的旋转. 在开始之前,先让我们来做 ...
- USB Audio设计与实现
1 前言 本文将基于STM32F4 Discovery板,从零开始设计并实现一个USB Audio的例子. 2 设计构思 所谓的USB AUDIO就是制作一个盒子,这个盒子可以通过USB连接到PC,P ...
- Python第二话 初识复杂数据类型（list、dictionary、tuple）
上一篇我们简单认识了数据类型:数字number和字符串string,这篇我们就来隆重介绍一下重量级的数据类型:列表list.字典dictionary和元组tuple. 一.列表List: ①列表是什么 ...
- 功能测试很low？不能升级到高级测试工程师?
功能测试很low?不能升级到高级测试工程师? 功能测试很low?功能测试很简单?功能测试就是黑盒测试?功能测试没有技术含量?功能测试工资低?只会功能测试没有竞争力?功能测试这活初中生都可以干?功能测试 ...
- LeetCode算法一题型一以及解答。
题目: 给定一个整数数列,找出其中和为特定值的那两个数. 你可以假设每个输入都只会有一种答案,同样的元素不能被重用. 分析: 普遍方法是直接遍历两遍数组,第一遍用target-nums[i],第二遍找 ...