<!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悬浮、回到顶部的更多相关文章

  1. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js原生回到顶部

    <!DOCTYPE html><html><head> <meta content="测试demo" name="Keyword ...

  3. js实现回到顶部功能

    js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...

  4. 页面滚动事件和利用JS实现回到顶部效果

    页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

  5. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

  6. js——页面回到顶部

    很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...

  7. js实现回到顶部操作

    <a href="javascript:;" id="btn" title="回到顶部"></a> 样式: #btn ...

  8. JS原生回到顶部效果

    // 回到顶部 onload = function () { var oBtnTop = document.getElementById('toTop'); var timer = null; oBt ...

  9. 原生js实现回到顶部

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  10. js原生回到顶部,并平滑过渡---- 记录

    window.scrollTo({ top: 0, behavior: 'smooth', });

随机推荐

  1. 【百度之星】【java大数+C++做法】hdu 6719 Strassen

    代码:递归搜索一下.java大数做法 import java.util.*; import java.math.*; import java.security.MessageDigest; publi ...

  2. hdu 5902 GCD is Funny

    Problem Description Alex has invented a new game for fun. There are n integers at a board and he per ...

  3. 牛客网暑期ACM多校训练营(第四场) G Maximum Mode 思维

    链接:https://www.nowcoder.com/acm/contest/142/G来源:牛客网 The mode of an integer sequence is the value tha ...

  4. 【Spring】对持久层技术的整合

    一.持久层技术 二.JdbcTemplate 开发步骤: 1. 导入相关的jar包 2. 配置连接池(数据源) 将参数设置到属性文件中: 3. 创建表 4. 编写实体类 5. Dao层实现 5.1 继 ...

  5. 学习 Nginx+IIS 分布式测试

    首先,从Nginx官网(http://nginx.org/en/download.html)下载了一个Window版本,解压后如图: 修改conf文件夹里面的配置文件nginx.conf,默认的808 ...

  6. Accuarcy and Precision

    机器学习中,Accuarcy 和 Precision 有什么区别呢? Accuracy = (TP+TN)/TOTAL SAMPLES 也就是计算正确的样本数,占到总样本数的比率 定义是: 对于给定的 ...

  7. 宝塔Linux面板命令

    安装宝塔 Centos安装脚本 yum install -y wget && wget -O install.sh http://download.bt.cn/install/inst ...

  8. 【新】mybatis中大于等于小于等于的两种常用写法

    mybatis中大于等于小于等于的写法 原符号 < <= > >= & ' " 替换符号 < <= > >= & &a ...

  9. xshell使用小技巧

    1. 方便复制:Tool -->  options --> right buttion(paste the clipboard contents) and copy selected te ...

  10. 大数据平台搭建 - cdh5.11.1 - hbase集群搭建

    一.简介 HBase是一种构建在HDFS之上的分布式.面向列的存储系统.在需要实时读写.随机访问超大规模数据集时,可以使用HBase. 尽管已经有许多数据存储和访问的策略和实现方法,但事实上大多数解决 ...