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(); ...
随机推荐
- java文件遍历
用java实现本地文件的遍历,顺便了解了下集合框架,注意java中还有Collections,是一个强大的工具,注意其与Collection的区别,在 for(File f: listFiles) 中 ...
- 前端工程师在实现支付功能的时候能做些什么（V客学院技术分享）？
现在最流行的两种支付微信支付和支付宝支付,在日常开发的过程中肯定离不开支付功能的开发,有很多人第一次接触时会有些措手不及. 一.业务逻辑 (电商平台为例子) 支付大部分用在电商平台,各种打赏,游戏充值 ...
- crontab + rsyncd同步方案
目的主机: rsync --daemon [root@iZ23ohdbxmrZ ~]# vim /etc/rsyncd.conf #global settingsport = 873pid file= ...
- servlet类与Spring Controller类的关系
以前的java web项目,需要在web.xml中定义servlet,对应不同的请求,而在spring项目中,我们用controller定义了各种各样的servlet(当然不包括DispatcherS ...
- go基础语法
定义变量: 可放在函数内,或直接放在包内使用var集中定义变量使用:=定义变量写的短一些 package main import ( "fmt" "math" ...
- php 与 c++ openssl 加密通信
$key = '1234567890123456'; $iv = '1234567890123456'; $enc = openssl_encrypt("hello wolrd!" ...
- 分布式缓存DistributedCache
本文是对MR案例:Map-Join的解读. 在hadoop中,共享全局变量或全局文件的几种方法 使用Configuration的set()方法,只适合数据内容比较小的场景 将缓存文件放在HDFS上,每 ...
- POJ 2051 argus（简单题，堆排序or优先队列）
又是一道数据结构题,使用堆来进行权值调整和排序,每次调整都是o(n)的复杂度,非常高效. 第一眼看题觉得可以用优先队列来做,应该也很简单. 事实上多数优先队列都是通过堆来实现的. 写的时候还是出了一些 ...
- 爬虫框架Scrapy之Spider
Spider Spider类定义了如何爬取某个(或某些)网站.包括了爬取的动作(例如:是否跟进链接)以及如何从网页的内容中提取结构化数据(爬取item). 换句话说,Spider就是您定义爬取的动作及 ...
- UVa 11549 计算器谜题（Floyd判圈算法）
https://vjudge.net/problem/UVA-11549 题意: 有一个老式计算器,只能显示n位数字,输入一个整数k,然后反复平方,如果溢出的话,计算器会显示结果的最高n位.如果一直这 ...