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', });
随机推荐
- 牛客小白月赛4 C 病菌感染 dfs
链接:https://www.nowcoder.com/acm/contest/134/C来源:牛客网 题目描述 铁子和顺溜上生物课的时候不小心将几滴超级病菌滴到了培养皿上,这可急坏了他们. 培养皿可 ...
- POJ 2491 Scavenger Hunt map
Scavenger Hunt Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2848 Accepted: 1553 De ...
- codeforces 816 C. Karen and Game（模拟+思维）
题目链接:http://codeforces.com/contest/816/problem/C 题意:给出一个矩阵,问能否从都是0的情况下只将一整行+1或者一整列+1变形过来,如果可以输出需要步数最 ...
- github 授权登录教程与如何设计第三方授权登录的用户表
需求:在网站上想评论一篇文章,而评论文章是要用户注册与登录的,那么怎么免去这麻烦的步骤呢?答案是通过第三方授权登录.本文讲解的就是 github 授权登录的教程. 效果体验地址:http://biao ...
- CSS特效集锦：视觉魔法的碰撞与融合（二）
引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...
- 前后端分离，获取token，验证登陆是否失效
maven依赖 <dependency> <groupId>com.auth0</groupId> <artifactId>java-jwt</a ...
- Spring MVC中返回JSON数据的几种方式
我们都知道Spring MVC 的Controller方法中默认可以返回ModeAndView 和String 类型,返回的这两种类型数据是被DispatcherServlet拿来给到视图解析器进行继 ...
- 024 实例5-身体质量指数BMI
目录 一."身体质量指数BMI"问题分析 1.1 身体质量指数BMI 1.2 问题需求 二."身体质量指数BMI"实例讲解 2.1 身体质量指标BMI 2.1. ...
- abp(net core)+easyui+efcore实现仓储管理系统——EasyUI前端页面框架 (十八)
目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二) ab ...
- VMware Ubuntu 19最新安装详细过程
ubuntu可以说是目前最流行的Linux改造版了(如果安卓不算的话),现在的很多服务器都是linux系统的,而自己属于那种前端也搞,后台也搞,对框架搭建也感兴趣,但是很多生产上的框架和工具都是安装在 ...