原生态js回顶部
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .public_gotop {
background-color: #858585;
position: fixed;
right: 2rem;
bottom: 6rem;
width: 3rem;
height: 3rem;
border-radius: 50%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABN0lEQVRYhe3Uuy4FURjFcZEjiMu76FwLiWuLhJJ4FU+gFwqNa1SuHQmtzhNoJRxB3H4Kc+LLGJdzDI1Z3cxe3/qvvfdk6uoKFSpUqEahFetYRtNfw9tx4k2HaPkreBuOvdcBmn8b3pyAKrrCTXjeQsNvwVtxFGAX6EAPyuH9bu7fRMbOL9EZ1ntTJbbRmBe8CfupY+/K8A2krmPzx9eRwPdS8O5P/IO4Df4NlGqFN2InhJXR+425oVSJtapLJPDtEHKNvirmR3AX5le+XQINydFVdIOBqnbwmjOaKrGE+q+GSl5/rxXdYqhaeMgbw33IW/ywRAJfTcGHa4WH3HE8hNyFzBKYD6YHTPwUHrKn8RTy57JM58niIybzgof8WTwnjLMsQz9OMZU3PDBmEkbn1+5ChQr9F70Ae6lHrD/JbEkAAAAASUVORK5CYII=);
background-repeat: no-repeat;
background-position: center;
background-size: 60%;
display: none;
}
</style>
</head> <body>
<div style="height: 500px; background: #E1A0F3"></div>
<div style="height: 500px; background: #CE77B5"></div>
<div class="public_gotop" id="gotop"></div>
<script type="text/javascript">
window.onload = function() {
// 返回顶部
var goTopEx = function() {
var gtObj = document.getElementById("gotop"); function getScrollTop() {
return document.documentElement.scrollTop || document.body.scrollTop;
} function setScrollTop(value) {
document.documentElement.scrollTop = value;
document.body.scrollTop = value;
}
window.onscroll = function() {
getScrollTop() > 80 ? gtObj.style.display = "block" : gtObj.style.display = "none";
}
gtObj.onclick = function() {
var goTop = setInterval(scrollMove, 10); function scrollMove() {
setScrollTop(getScrollTop() / 1.1);
if (getScrollTop() < 1) clearInterval(goTop);
}
}
}()
}
</script>
</body> </html>
效果如图：
备注解释：
function goTopEx() { //函数名goToEx
var obj = document.getElementById("goTopBtn"); //获取id为goTopBtn的元素
function getScrollTop() { //函数名为getScrollTop
return document.documentElement.scrollTop; //返回document.documentElement(html)的滚动条的高度
}
function setScrollTop(value) { //函数名为setScrollTop,形参为value
document.documentElement.scrollTop = value; //设置document.documentElement(html)的滚动条的高度为value
}
window.onscroll = function() { getScrollTop() > 0 ? obj.style.display = "" : obj.style.display = "none"; }; //当移动鼠标的时候,如果document.documentElement(html)的滚动条的高度>0,则obj显示,否则隐藏掉
obj.onclick = function() { //点击obj
var goTop = setInterval(scrollMove, 10); //每隔10毫秒发生scroolMove方法
function scrollMove() { //函数名为scrollMove
setScrollTop(getScrollTop() / 1.1); //设置document.documentElement(html)的滚动条的高度为getScrollTop()/1.1
if (getScrollTop() < 1) clearInterval(goTop); //如果得到document.documentElement(html)的滚动条的高度<1,则清除掉scroolMove方法
}
};
}
原生态js回顶部的更多相关文章
- js回网页顶部
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式
返回网页顶部方法 一.锚链接 simpleDemo: <!DOCTYPE html> <html lang="en"> <head> <m ...
- js返回顶部封装 简洁
js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...
- 详解原生JS回到顶部
第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...
- 本站页脚HTML回顶部代码
<style type="text/css">.top { width: 50px; height: 50px; background-color: #F0F0F0; ...
- 原生态js，返回至顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js返回顶部效果
当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...
- css+js回到顶部
.backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; c ...
- JS网页顶部弹出可关闭广告图层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- ABAP内表数据和JSON格式互转
本程序演示ABAP内表数据如何转为JSON格式,以及JSON数据如何放入内表. 注:json字符串格式如:jsonstr = '[ {flag: "0",message: &quo ...
- systemd 配置文件
[Unit]区块通常是配置文件的第一个区块,用来定义 Unit 的元数据,以及配置与其他 Unit 的关系.它的主要字段如下. Description:简短描述 Documentation:文档地址 ...
- Linux实战教学笔记28：企业级LNMP环境应用实践
一,LNMP应用环境 1.1 LNMP介绍 大约在2010年以前,互联网公司最常用的经典Web服务环境组合就是LAMP(即Linux,Apache,MySQL,PHP),近几年随着Nginx Web服 ...
- java算法 第七届 蓝桥杯B组（题+答案） 3.凑算式
3.凑算式 (结果填空) B DEFA + --- + ------- = 10 C GHI (如果显示有问题,可以参见[图1.jpg]) 这个算式中A~ ...
- 如何降低Unity程序的Drawcall
[如何降低Unity程序的Drawcall] Unity can combine a number of objects at runtime and draws them together with ...
- UISprite
[UISprite] UISprite用于引用一个UIAtlas中的sprite. 此脚本最强大的功能是Sprite Type,主要指定在需拉伸图片时的行为,它有以下几种值: 1)Simple:普通拉 ...
- 我理解的MVCC内部实现原理
MySQL InnoDB存储引擎,实现的是基于多版本的并发控制协议——MVCC (Multi-Version Concurrency Control) (注:与MVCC相对的,是基于锁的并发控制,Lo ...
- Java Persistence with MyBatis 3(中文版) 前言
对很多软件系统而言,保存数据到数据库和从数据库中检索数据是其工作流程中至关重要的一部分.在 Java 领域,有很多的实现了数据持久化层的工具和框架,它们每一个都有自己不同的实现方法.而 MyBatis ...
- vector的capacity增长方式
vector的capacity()调用返回vector中最大能够存储的元素个数,也即在下一次需要扩充容量之前能容纳的元素个数.reserve会使容器在必要的时候增长,以便容纳制指定数目的元素. #in ...
- Linux下oracle定时备份
1. 设置数据库空表可导出(oracel11g) 用PL/SQL登录数据库(或者其他工具) 执行: select 'alter table '||table_name||' allocate exte ...