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(); ...
随机推荐
- 联想(Lenovo)小新310经典版进bios方法
1,找到novo按钮. 2,在关机的状态下桶一下小孔,不用任何操作,电脑进入bios选择界面.
- jquery ajax修改全局变量或者局部变量示例代码
今天在工作的时候遇见一个问题,利用ajax到action中查询返回的值付给全局变量或者局部变量,总是改变不了,后来查找资料才发现需要添加async:false 示例代码: var status=1; ...
- C++之MFC基本设置
1 设置单元格的值 1) 选中指定单元格,使用SetValue设置值 CellName.Format(_T("A%d"),i);//单元格的名称 range.AttachDispa ...
- iscroll.js 用法介绍
iscroll-5中文文档:http://wiki.jikexueyuan.com/project/iscroll-5/ 概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码. ...
- java反射 - getXXX 与 getDeclaredXXX
1.getXXX 和 getDeclaredXXX java 里 Class<?> 有下面这些方法: 类似的方法有: 2.getMethod(s) 和 getDeclaredMethod( ...
- 计算mysql 数据库 表大小 服务器传输 小写表明转成大写
//数据库表存储大小 select table_schema,table_name,table_rows,concat(round(data_length/1024/1024/1024,2),'GB' ...
- tomcat结合httpd和nginx
httpd结合tomcat: 前提:httpd版本2.4以上,编译安装 httpd:192.168.223.136 tomcat:192.168.223.146 tomcat简单创建一个额外的weba ...
- [CF1042F]Leaf Sets
题意:给定一棵$n$个点的树,将叶子节点分为数个集合使集合里点对最长距离不超过$k$,求最少集合数.($n\le1000000$) 首先我们可以想到,这道题并不是让你构造最优方案,因为只要把所有叶子节 ...
- Java的历史及发展
Java之父:詹姆斯·高斯林 (James Gosling) Java自1995诞生,至今已经20多年的历史. Java的名字的来源:Java是印度尼西亚爪哇岛的英文名称,因盛产咖啡而闻名.Java语 ...
- Centos中使用Jenkins执行gulp命令：command not found
在Centos操作系统,使用Jenkins的pipeline执行发布流程:jenkinsfile如下: stage("前端项目构架gulp") { steps { dir('src ...