js悬浮、回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{width:100px;height:40px;line-height:40px;text-align: center;background: red;position: absolute;left: 0;top: 200px;}
</style>
<script>
onload = function(){
var obox = document.querySelector(".box");
// obox的初始top值
var oboxT = 200;
onscroll = function(){
// 获取页面滚动的实时top
var scrollT = document.documentElement.scrollTop;
// 滚动时不断的将实时的top+初始值，在设置回去
obox.style.top = oboxT + scrollT + "px";
}
var t = null;
// 点击事件
obox.onclick = function(){
// 清除计时器
clearInterval(t);
// 开启计时器
t = setInterval(function(){
// 判断是否到顶部
if(document.documentElement.scrollTop <= 0){
clearInterval(t);
}else{ //否则，继续向上
document.documentElement.scrollTop -= 100;
}
}, 30);
} }
</script>
</head>
<body>
<div class="box">回到顶部</div>
<h1>你是谁</h1>
<h1>我是谁</h1>
<h1>不清楚</h1>
<h1>你是谁</h1>
<h1>我是谁</h1>
<h1>不清楚</h1>
<h1>你是谁</h1>
<h1>你是谁</h1>
<h1>我是谁</h1>
<h1>不清楚</h1>
<h1>你是谁</h1>
<h1>我是谁</h1>
<h1>不清楚</h1>
<h1>你是谁</h1>
<h1>你是谁</h1>
<h1>我是谁</h1>
<h1>不清楚</h1>
<h1>你是谁</h1>
<h1>我是谁</h1>
<h1>不清楚</h1>
<h1>你是谁</h1>
<h1>你是谁</h1>
<h1>我是谁</h1>
<h1>不清楚</h1>
<h1>你是谁</h1>
<h1>我是谁</h1>
<h1>不清楚</h1>
<h1>你是谁</h1>
<h1>你是谁</h1>
<h1>我是谁</h1>
<h1>不清楚</h1>
<h1>你是谁</h1>
<h1>我是谁</h1>
<h1>不清楚</h1>
<h1>你是谁</h1>
<h1>你是谁</h1>
<h1>我是谁</h1>
<h1>不清楚</h1>
<h1>你是谁</h1>
<h1>我是谁</h1>
<h1>不清楚</h1>
<h1>你是谁</h1>
</body>
</html>
效果图如下：
js悬浮、回到顶部的更多相关文章
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js原生回到顶部
<!DOCTYPE html><html><head> <meta content="测试demo" name="Keyword ...
- js实现回到顶部功能
js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...
- 页面滚动事件和利用JS实现回到顶部效果
页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
- 通过js实现回到顶部功能
许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...
- js——页面回到顶部
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...
- js实现回到顶部操作
<a href="javascript:;" id="btn" title="回到顶部"></a> 样式: #btn ...
- JS原生回到顶部效果
// 回到顶部 onload = function () { var oBtnTop = document.getElementById('toTop'); var timer = null; oBt ...
- 原生js实现回到顶部
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- js原生回到顶部，并平滑过渡---- 记录
window.scrollTo({ top: 0, behavior: 'smooth', });
随机推荐
- HDU - 3974 Assign the task （DFS建树+区间覆盖+单点查询）
题意:一共有n名员工, n-1条关系, 每次给一个人分配任务的时候,(如果他有)给他的所有下属也分配这个任务, 下属的下属也算自己的下属, 每次查询的时候都输出这个人最新的任务(如果他有), 没有就输 ...
- codeforces 465 C. No to Palindromes!（暴力+思维）
题目链接:http://codeforces.com/contest/465/problem/C 题意:给出一个不存在2个或以上回文子串的字符串,全是由小写字母组成而且字母下表小于p,问刚好比这个字符 ...
- MySql连接笔记
一.内连接查询 inner join 关键字:inner join on 语句:select * from a_table a inner join b_table b on a.a_id = ...
- 使用 jupyter-notebook + python + matplotlib 进行数据可视化
上次用 python 脚本中定期查询数据库,监视订单变化,将时间与处理完成订单的数量进行输入写入日志,虽然省掉了人为定时查看数据库并记录的操作,但是数据不进行分析只是数据,要让数据活起来! 为了方便看 ...
- 【LeetCode】75-颜色分类
题目描述 给定一个包含红色.白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列. 此题中,我们使用整数 0. 1 和 2 分别表示红色.白色 ...
- STA——multicycle path
之前去地平线面试的时候被问到了multicycle path的一点问题,其实这个问题我应该知道,看过<Constraining Designs for Synthesis and Timing ...
- Kafka服务端之网络连接源码分析
#### 简介 上次我们通过分析KafkaProducer的源码了解了生产端的主要流程,今天学习下服务端的网络层主要做了什么,先看下 KafkaServer的整体架构图 ![file](https:/ ...
- .Net基础篇_学习笔记_第七天_随机数的产生
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- JDBC连接时出现的问题总结
java.sql.SQLException: The server time zone value '�й���ʱ��' is unrecognized or represents more tha ...
- python解释器安装和变量配置
python解释器安装 第一步https://www.python.org/ 下载 python-3.6.6 和 python-2.7.16 俩个版本 Downloads 下 选windows版本 4 ...