js 滚到页面顶部
一、滚到顶部，且滚动中，用户滚动鼠标无效
<style>
.div1, .div2, .div3, .div4 {
height: 400px;
width: 400px;
} .div1 {
background: #eea7cf;
} .div2 {
background: #a95ee1;
} .div3 {
background: #c57cad;
} .div4 {
background: #790d86;
} .fixed-tool { position: fixed;
top: 50px;
right: 0;
display: none;
/*border: 1px solid black;*/
} .fixed-tool > a {
display: block;
} .go-top {
background: #bb9cff;
padding: 10px 1px;
} .go-top-with-img {
padding: 0;
width: 40px;
height: 40px;
background: url(top_bg.png) no-repeat;
} .go-top-with-img:hover {
background-position: left -40px;
}
</style>
</head>
<body>
<h1 id="title1">标题1 </h1> <div class="div1"></div>
<h1>标题2</h1> <div class="div2"></div>
<h1>标题3</h1> <div class="div3"></div>
<h1>标题4 </h1> <div class="div4"></div>
<h1>标题5 </h1> <div class="div1"></div>
<h1>标题6 </h1> <div class="div3"></div>
<h1>标题7</h1> <div class="div2"></div>
<h1>标题8 </h1>
<br/> <div class="fixed-tool" id="fixedTool">
<a href="#title1">标题1</a>
<a href="javascript:;" class="go-top">顶部</a>
<a href="javascript:;" class="go-top-with-img" id="goTop"></a>
</div>
<script>
//"use strict";
window.onload = function () {
var oGoTopLink = document.getElementById("goTop");
var iClientHeight = document.documentElement.clientHeight;
var fixedTool = document.getElementById("fixedTool");
var timer = null; window.onscroll = function () {
//判断是否滚到了第二屏,是则显示，否则隐藏
var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (sScrollTop >= iClientHeight) {
fixedTool.style.display = "block";
} else {
fixedTool.style.display = "none";
}
}; oGoTopLink.onclick = function () {
timer = setInterval(function () {
var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var iSpeed = Math.floor(-sScrollTop / 12);
document.body.scrollTop = document.documentElement.scrollTop = sScrollTop + iSpeed;
document.body.onmousewheel = function(){
return false;
};
if (sScrollTop <= 0) {
clearInterval(timer);
document.body.onmousewheel = function(){
return true;
};
}
}, 30); }
};
</script>
</body>
</html>
封装此方法：
//封装以上方法：
/**
* @param {String} sWrapId :the element which wraped the go-to-top link
* @param {String} sEleId :the go-to-top element
* @param {Number} iSpeed : speed of scrolling ,smaller faster
* @returns {undefined}
* usage: goTop("fixedTool", "goTop", 12); 关于样式：可以自己写，如果想用默认样式，就用我上述例子的那些class name,
*/
function goTop(sWrapId, sEleId, iSpeed){
var oGoTopLink = document.getElementById(sEleId);
var iClientHeight = document.documentElement.clientHeight;
var wrapBox = document.getElementById(sWrapId);
var timer = null; window.onscroll = function () {
//判断是否滚到了第二屏,是则显示，否则隐藏
var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (sScrollTop >= iClientHeight) {
wrapBox.style.display = "block";
} else {
wrapBox.style.display = "none";
}
}; oGoTopLink.onclick = function () {
timer = setInterval(function () {
var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var iScrollSpeed = Math.floor(-sScrollTop / iSpeed);
document.body.scrollTop = document.documentElement.scrollTop = sScrollTop + iScrollSpeed;
document.body.onmousewheel = function(){
return false;
};
if (sScrollTop <= 0) {
clearInterval(timer);
document.body.onmousewheel = function(){
return true;
};
}
}, 30);
};
return undefined;
}
二，滚到顶部，且滚动中，若用户滚动鼠标，则停止滚到顶部动作
<script>
//"use strict";
window.onload = function () {
var oGoTopLink = document.getElementById("goTop");
var iClientHeight = document.documentElement.clientHeight;
var fixedTool = document.getElementById("fixedTool");
var bIsTop = true;
var timer = null; //当正在滚回顶部的动作中，用户滚动滚轮的话，停止滚回顶部的动作
window.onscroll = function () {
//判断是否滚到了第二屏,是则显示，否则隐藏
var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (sScrollTop >= iClientHeight) {
fixedTool.style.display = "block";
} else {
fixedTool.style.display = "none";
}
if (!bIsTop) {
clearInterval(timer);
}
bIsTop = false;
}; oGoTopLink.onclick = function () {
timer = setInterval(function () {
var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var iSpeed = Math.floor(-sScrollTop / 12);
document.body.scrollTop = document.documentElement.scrollTop = sScrollTop + iSpeed;
bIsTop = true;
if (sScrollTop <= 0) {
clearInterval(timer);
}, 30);
}
};
</script>
js 滚到页面顶部的更多相关文章
- ASP.NET后台输出js大全,页面顶部、form表单中前面与后面、和UpdatePanel(ScriptManager、AJAX)输出JS
Response.Write 与 Page.ClientScript.RegisterStartupScript 与 Page.ClientScript.RegisterClientScriptB ...
- js返回页面顶部
第一次写博客,不太专业,废话不多说,直接上自己早上做的东东.有不足之处,希望指点. css: body{counter-reset: p;} p{width: 100px;margin: 20px 0 ...
- 基于JS实现回到页面顶部的五种写法(从实现到增强)
这篇文章主要介绍了基于JS实现回到页面顶部的五种写法(从实现到增强)的相关资料,本文介绍的非常详细,实用性也非常高,非常具有参考借鉴价值,需要的朋友可以参考下 写法 [1]锚点 使用锚点链接是一种 ...
- [HTML/JS] JQuery 页面滚动回到顶部
HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...
- js网页返回页面顶部的小方法
咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...
- 页面滚动事件和利用JS实现回到顶部效果
页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
- JS实现页面进入、返回定位到具体位置
最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...
- js实现返回顶部功能的解决方案
很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...
- jquery、js获取页面高度宽度等
jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...
随机推荐
- shell脚本批量启动zookeeper
脚本名称为zk_run.sh 将下面代码粘贴进zk_run.sh 添加执行权限 chmode +x zk_run.sh 运行脚本 ./zk_run.sh start 如果发现zookeeper没有启动 ...
- hive报错汇总
1.需要注意的是,要在namenode(超级用户)上操作,貌似是 hive> insert into table record_partition partition(trancation_da ...
- dubbo-admin 监控中心 部署
dubbo-admin部署 下载: GitHub:https://github.com/search?q=dubbo-admin 百度网盘: 链接:https://pan.baidu.com/s/1v ...
- Docker-docker制作镜像
一.下载镜像 a.以daocloud为mirror下载Nginx镜像 配置daocloud为mirror,下载Nginx镜像:(daocloud官网登陆后,发现镜像里找到Nginx镜像) 下载Ngin ...
- 优雅的处理你的Java异常
本文介绍 本文仅按照业务系统开发角度描述异常的一些处理看法.不涉及java的异常基础知识,可以自行查阅 <Java核心技术 卷I> 和 <java编程思想> 可以得到更多的基础 ...
- https nginx配置
cd /saas/conf/nginx/ mkdir key cd key 创建key: openssl req -nodes -newkey rsa:2048 -keyout server.key ...
- 20145329《Java程序设计》第八周学习总结
教材学习内容总结 日志 1.java.util.logging包提供了日志功能相关类与接口. 2.使用日志的起点是Logger类,Longer类的构造函数标示为protected,不同包的类药取得Lo ...
- 通过Excel生成批量SQL语句
项目中有时会遇到这样的要求:用户给发过来一些数据,要我们直接给存放到数据库里面,有的是Insert,有的是Update等等,少量的数据我们可以采取最原始的办法,也就是在SQL里面用Insert int ...
- HA-web-services
一.HA部署 本次实验的程序选型为heartbeat v1 + hearesources.资源有IP和httpd,filesystem 配置HA集群的前提: (1)各节点资源一致,硬件或软件环境一致 ...
- Java实习二
链表(java实现) Link.java public class Link{ private Node first; public Link(){ this.first = null; } //判断 ...