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', });
随机推荐
- POJ-3259 Wormholes （ballman_ford 判负环）
ballman_ford 是对单源点到任意点最短路的处理方法(可以含负权边). 对所有边进行n-1次循环,(n为点得个数),如果此时源点到这条边终点的距离 大于 源点到这条边起点的距离加上路得权值就进 ...
- 杭电多校第九场 hdu6425 Rikka with Badminton 组合数学 思维
Rikka with Badminton Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 524288/524288 K (Java/O ...
- yzoj P2044 数字游戏 题解
题意 dfs骗了30分,一开始想的距离正解差一点啊,贪心加dp就可以过的水题,真正太蒻了 解析 代码 #include<bits/stdc++.h> using namespace std ...
- 51NOD---逆序对（树状数组 + 归并排序）
1019 逆序数 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称 ...
- 手把手告诉你如何安装多个版本的node，妈妈再也不用担心版本高低引发的一系列后遗症（非常详细，非常实用）
简介 最近好多人都问到node怎么同时安装多个版本? 如何配置node的环境变量,如何自如的在多个版本中切换node?还有就是自己在做appium自动化的时候,有时候会因为node的版本过高或者是太低 ...
- java对象与json字符串的互相转换
java对象与json字符串的互相转换 1.采用 net.sf.json.JSONObject maven依赖包: <dependency> <groupId>net.sf.j ...
- Container容器crontab错误问题
问题描述 容器中的cron定时计划任务不执行 问题分析 排查一:检查Container容器是否安装cron # rpm -qa | grep cron # ls /etc/init.d/ 若没有安装, ...
- NOIP2009 1.多项式输出
题目: 其中,aixi称为 i 次项,ai 称为 i 次项的系数.给出一个一元多项式各项的次数和系数,请按照如下规定的格式要求输出该多项式: 1. 多项式中自变量为 x,从左到右按照次数递减顺序给出多 ...
- 21 (OC) 数据持久化
概论 所谓的持久化,就是将数据保存到硬盘中,使得在应用程序或机器重启后可以继续访问之前保存的数据.在iOS开发中,有很多数据持久化的方案,接下来我将尝试着介绍一下5种方案: plist文件(属性列表) ...
- Kubernetes 从懵圈到熟练：集群服务的三个要点和一种实现
作者 | 声东 阿里云售后技术专家 文章来源:Docker,点击查看原文. 以我的经验来讲,理解 Kubernetes 集群服务的概念,是比较不容易的一件事情.尤其是当我们基于似是而非的理解,去排查服 ...