原生态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/ ...
随机推荐
- sax解析xml文件，封装到对象中
创建User.java类 public class User { private String id; private String name; private String age; private ...
- 求Half向量
[求Half向量] 给定入射向量与视角向量.把入射向量与视角向量相加即可,如下: 前提是 lightDir.ViewDir 都是单位向量.
- spring MVC模式拦截所有入口方法的入参出参打印
import com.alibaba.fastjson.JSONObject; import com.alibaba.fastjson.serializer.SerializerFeature; im ...
- 01-MySQL优化大的思路
首先不是看它的表结构等等.从整体上去观察,不断去看它的状态.这个状态往往不是一两个小时可以看出来的,得写一个脚本,观察它的24小时的周期性变化,不断刷新它的脚本,观察它的Status.主要是看它有没有 ...
- Activiti 整合的小插曲
虽然是令人头痛的小插曲,真不令人省心.2年不用它又忘了怎么配,这次一定记录下来,呵呵哒. 1.下载及运行设计器 官网下载源码压缩包,解压后找到设计器目录:Activiti-activiti-5.22. ...
- windows下 apache,php,mysql，phpadmin集成化安装
1.appserv 直接下载安装, 2.linux环境下下载安装LAMP
- #error用法
#error命令是C/C++语言的预处理命令之一,当预处理器预处理到#error命令时将停止编译并输出用户自定义的错误消息. 语法: #error [用户自定义的错误消息] 注:上述语法成份中的方括号 ...
- [Training Video - 4] [Groovy] Constructors in groovy, this keyword
Bank.log = log Bank b1 = new Bank() b1.name = "BOA" b1.minbalance = 100 b1.city="Lond ...
- TF Boys (TensorFlow Boys ) 养成记（四）：TensorFlow 简易 CIFAR10 分类网络
前面基本上把 TensorFlow 的在图像处理上的基础知识介绍完了,下面我们就用 TensorFlow 来搭建一个分类 cifar10 的神经网络. 首先准备数据: cifar10 的数据集共有 6 ...
- ServletRequest面试题
使用request获得请求行:String getmethod():获得请求的资源:String getcontextpath():----web应用名称request是一个域对象request完成请 ...