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(); ...
随机推荐
- Oracle中用触发器实现自动记录表数据被修改的历史信息
oracle中用触发器实现自动记录表数据被修改的历史信息. 有一些比较重要的表字段每次修改需要做历史记录,以后可以查询这个表中某些字段如何被修改过.由什么改成了什么等,由谁操作,操作时间等. 实例:1 ...
- 【c++ primer, 5e】函数声明 & 分离式编译
p186~p188: 函数声明1.函数只能定义一次,但是可以声明多次. 2.函数的接口:返回类型 + 函数名 + 形参类型 3.为什么要在头文件中进行函数声明???在源文件中定义?暂时理解到,这么做可 ...
- [随记][asp.net基础]Page_Load和OnLoad
标题:[随记][asp.net基础]Page_Load和OnLoad 一.前言 东西好久不用.不想,就会忘,所以没办法,只好记下来. 二.正文 aspx页面加载的时候会自动执行Page_Load,也会 ...
- javascript里用php
<script type="text/javascript" > <?php if (!empty($searchResult)):?> $.searchM ...
- 20145302张薇《Java程序设计》第五周学习总结
20145302 <Java程序设计>第五周学习总结 教材学习内容总结 第八章 try catch JVM会先尝试执行try区块中的内容,若发生错误且与catch后面的类型相符,则执行ca ...
- 2045331 《Java程序设计》第09周学习总结
2045331 <Java程序设计>第09周学习总结 教材学习内容总结 第十六章 整合数据库 16.1.1JDBC简介 1.JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接 ...
- 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码
转载请注明出处:这里写链接内容 今天是10月份的最后一天,我加了3个月来的第一个班,挤出了这篇. 废话不多先安利,然后继续学习 RN 有好东西都往里面丢,努力做好归纳 https://github.c ...
- JAVA基础补漏--SET
HashSet: 1.无序集合. 2.底层是一个哈希表结构,查询速速很快. 哈希表==数据 + 链表/红黑树 特点:查询速度快. 存储数据到SET中: 1.计算数据的HASH值. 2.查看有没有相同H ...
- mysql慢查询和php-fpm慢日志
MySQL慢查询 在web开发中,我们经常会写出一些SQL语句,一条糟糕的SQL语句可能让你的整个程序都非常慢,超过10秒一般用户就会选择关闭网页,如何优化SQL语句将那些运行时间 比较长的SQL语句 ...
- linxu 安装rabbitMQ
转载自:http://blog.csdn.net/mooreliu/article/details/44645807 首先使EPEL(http://fedoraproject.org/wiki/EPE ...