一、滚到顶部，且滚动中，用户滚动鼠标无效
<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>
时间： 2024-08-07 00:18:54