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', });
随机推荐
- CF1029C Maximal Intersection 暴力枚举
Maximal Intersection time limit per test 3 seconds memory limit per test 256 megabytes input standar ...
- 解决问题：SpringMvc中转发的html文件中文是乱码
目录 1.环境说明,以及前言 2.问题描述: 3.失败的方法(这里写失败并不代表在其他情况不管用) 3.1 html网页本身编码不是UTF-8(推荐尝试) 3.2 web.xml中没有设置配置编码方式 ...
- Java集合中List、Set以及Map
概述: List , Set, Map都是接口:List , Set继承至Collection接口,Map为独立接口 Set下有HashSet,LinkedHashSet,TreeSet List下有 ...
- 解决homebrew下install时出现的问题
在homebrew下install influxdb时出现error: Error: Failure while executing: git config --local --replace-a ...
- JavaScript如何给td赋值
td里加个标签,如: <td><div id="aa"></div></td> document.getElementById('a ...
- FreeSql （十三）更新数据时忽略列
var connstr = "Data Source=127.0.0.1;Port=3306;User ID=root;Password=root;" + "Initia ...
- java8中字符串常量以及GC相应处理机制
目录 1,常量池 1.1, class文件常量池 1.2, 运行时常量池 1.3,字符串常量池 String.intern() -XX:StringTableSize 2,使用new关键字和使用字符串 ...
- 使用Hexo搭建个人博客并部署到GitHub或码云上全过程
一.前言 如上图所示:GitHub有Github Pages,而码云也有码云 Pages 1.Github Pages或Gitee Pages是什么呢? Github Pages或者Gitee Pag ...
- Falsk中的Request、Response
Flask 中的Response 1.HTTPResponse('helloword') "helloword" from flask import Flask # 实例化Flas ...
- [C++] 头文件中的#ifndef，#define，#endif以及#pragma用法
想必很多人都看过“头文件中用到的 #ifndef/#define/#endif 来防止该头文件被重复引用”.但是是否能理解“被重复引用”是什么意思?头文件被重复引用了,会产生什么后果?是不是所有的头文 ...