一、移动滚动条
scroll(x, y)
将滚动条移动到指定位置。该方法接收两个参数,分别是x和y坐标。
<div style="height:1000px">
<button id='btn' style="position:fixed">滚动</button>
</div>
<script>
btn.onclick = function(){
scroll(0,0); //滚动到指定位置
}
</script>
scrollTo(x, y)
scrollTo方法和scroll方法功能完全相同。
<div style="height:1000px">
<button id='btn' style="position:fixed">滚动</button>
</div>
<script>
btn.onclick = function(){
scrollTo(0,0); //滚动到指定位置
}
</script>
scrollBy(x, y)
使滚动条移动指定距离。该方法接收两个参数,分别是x和y方向上的偏移量。
<div style="height:1000px">
<button id='btn1' style="position:fixed">向下滚动</button>
<button id='btn2' style="position:fixed;top:40px">向上滚动</button>
</div>
<script>
btn1.onclick = function(){
scrollBy(0,100); //每次点击向上滚动100px
}
btn2.onclick = function(){
scrollBy(0,-100); //每次点击向下滚动100px
}
</script>
封装方法实现自动阅读功能。
<!--文本省略-->
<button id="start" style="width:100px;height:100px;
background-color:red;border-radius: 50%;
position:fixed;bottom:300px;right:100px;">开始</button>
<button id="stop" style="width:100px;height:100px;
background-color:yellow;border-radius: 50%;
position:fixed;bottom:100px;right:100px;">停止</button>
<script>
var timer = 0;
start.onclick = function(){
timer = setInterval(function(){
window.scrollBy(0, 10);
},100);
}
stop.onclick = function(){
clearInterval(timer);
}
</script>
如上代码所示,如果连续点击多次开始按钮,会创建多个定时器,它们的效果会叠加。此时点击停止按钮,只会清除最新的一个定时器,其余不受影响。这是一个bug,修改如下。
<!--文本省略-->
<button id="start" style="width:100px;height:100px;
background-color:red;border-radius: 50%;
position:fixed;bottom:300px;right:100px;">开始</button>
<button id="stopd" style="width:100px;height:100px;
background-color:yellow;border-radius: 50%;
position:fixed;bottom:100px;right:100px;">停止</button>
<script>
var timer = 0;
var key = true; //加锁式编程
start.onclick = function(){
if(key){
timer = setInterval(function(){
window.scrollBy(0, 10);
},100);
key = false;
}
}
stopd.onclick = function(){
clearInterval(timer);
key = true;
}
</script>
scrollIntoView()
移动滚动条,让当前元素在视口中可见。该方法接收一个布尔类型的参数,传参为true或不传参时,视口顶部会尽可能与当前元素顶部平齐。传参为false时,视口底部会尽可能与当前元素底部平齐。该方法可以在所有html元素上调用,兼容于所有主流浏览器。
<style>
button{
position:fixed;
right:0;
bottom:0;
}
</style>
<div style="height:2000px;">
<div id="div"></div>
<button id="btn">回到顶部</button>
</div>
<script>
btn.onclick = function(){
div.scrollIntoView();
}
</script>
二、滚动条的移动距离
标准方法
w3c提供了两个标准方法pageXOffset和pageYOffset,分别用来计算滚动条在x轴和y轴上的移动距离。它们在ie8及以下版本的浏览器中不兼容。ie9是一个过度版本,ie9以上全面支持w3c标准,ie9以下不支持w3c标准,ie9支持了一小部分。
window.pageXOffset
计算滚动条在x轴上的移动距离,返回结果是一个数字,单位像素。只读属性。
window.pageYOffset
计算滚动条在y轴上的移动距离,返回结果是一个数字,单位像素。只读属性。
兼容低版本ie
兼容低版本ie浏览器的方法有两组,分别是第一组document.body.scrollLeft/scrollTop和第二组document.documentElement.scrollLeft/scrollTop。它们都用来获取或设置滚动条在x轴/y轴上的移动距离,返回结果是一个数字,单位像素。可读可写。这里兼容性比较混乱,有的ie版本第一组方法可用,有的第二组方法可用。规律是这两组方法只能也肯定会有一组是可用的,另一组不可用的方法返回值一定是0。所以在使用它们时,只需将两组方法相加即可。
var xOffset = document.body.scrollLeft + document.documentElement.scrollLeft;
var yOffset = document.body.scrollTop + document.documentElement.scrollTop;
//实现回到顶部,兼容于所有浏览器
function scrollTop(){
var distance = document.body.scrollTop + document.documentElement.scrollTop
if(distance != 0){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
封装兼容性方法求滚动条移动距离
function getScrollOffset(){
if(window.pageXOffset){
return {
x: window.pageXOffset,
y: window.pageXOffset
}
}else{
return {
x: document.body.scrollLeft + document.documentElement.scrollLeft,
y: document.body.scrollTop + document.documentElement.scrollTop
}
}
}
三、滚动事件
window对象或dom元素都可以设置滚动事件。
<div style="height:1000px">
<div id="div" style="position:fixed;top:10px;"></div>
</div>
<script>
window.onscroll = function(){
var distance = document.documentElement.scrollTop + document.body.scrollTop;
div.innerHTML = 'scrollTop:' + distance;
}
</script>
四、操作滚动条回到顶部
五种基本方法
锚点
锚点是一种实现页内跳转的常用方式。利用锚点可以很轻松的实现返回顶部功能。
<style>
a{
position:fixed;
right:0;
bottom:0;
}
</style>
<div style="height:2000px;">
<div id="point"></div>
<a href="#point">回到顶部</a>
</div>
scrollTop
scrollTop属性用于获取滚动条在y轴上的移动距离。将该属性设置为0可以实现返回顶部功能。
<style>
button{
position:fixed;
right:0;
bottom:0;
}
</style>
<div style="height:2000px;">
<button id="btn">回到顶部</button>
</div>
<script>
function scrollTop(){
var distance = document.body.scrollTop + document.documentElement.scrollTop
if(distance != 0){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
btn.onclick = scrollTop;
</script>
scrollTo()或scroll()
将滚动条移动到指定位置。该方法接收两个参数,分别是x和y坐标。设置scrollTo(0,0)可以实现返回顶部的效果。
<style>
button{
position:fixed;
right:0;
bottom:0;
}
</style>
<div style="height:2000px;">
<button id="btn">回到顶部</button>
</div>
<script>
btn.onclick = function(){
scrollTo(0,0); //或scroll(0,0);
}
</script>
scrollBy()
使滚动条移动指定距离。该方法接收两个参数,分别是x和y方向上的偏移量。计算滚动条在y轴上的移动距离,将其作为参数,逆向滚动,就可以实现返回顶部的功能。
<style>
button{
position:fixed;
right:0;
bottom:0;
}
</style>
<div style="height:2000px;">
<button id="btn">回到顶部</button>
</div>
<script>
btn.onclick = function(){
var top = 0;
if(window.pageYOffset){
top = window.pageYOffset;
}else{
top = document.body.scrollTop + document.documentElement.scrollTop;
}
scrollBy(0,-top);
}
</script>
scrollIntoView
移动滚动条,让当前元素在视口中可见。该方法接收一个布尔类型的参数,传参为true或不传参时,视口顶部会尽可能与当前元素顶部平齐。传参为false时,视口底部会尽可能与当前元素底部平齐。该方法可以在所有html元素上调用,兼容于所有主流浏览器。
<style>
button{
position:fixed;
right:0;
bottom:0;
}
</style>
<div style="height:2000px;">
<div id="div"></div>
<button id="btn">回到顶部</button>
</div>
<script>
btn.onclick = function(){
div.scrollIntoView();
}
</script>
效果增强
美化按钮
ie8及以下版本的浏览器中不兼容。
<style>
.box{
position:fixed;
right:10px;
bottom: 10px;
height:30px;
width: 50px;
text-align:center;
padding-top:20px;
background-color: lightblue;
border-radius: 20%;
overflow: hidden;
}
.box:hover:before{
top:50%
}
.box:hover .box-in{
visibility: hidden;
}
.box:before{
position: absolute;
top: -50%;
left: 50%;
transform: translate(-50%,-50%);
content:'回到顶部';
width: 40px;
color:peru;
font-weight:bold;
}
.box-in{
visibility: visible;
display:inline-block;
height:20px;
width: 20px;
border: 3px solid black;
border-color: white transparent transparent white;
transform:rotate(45deg);
}
</style>
<div style="height:2000px;">
<div id="box" class="box">
<div class="box-in"></div>
</div>
</div>
添加动画
使用定时器,让scrollTop的值每次减少50,到0则动画完毕。
<script>
(function(){
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(fn) {
setTimeout(fn, 16);
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop + document.documentElement.scrollTop;
if(oTop > 0){
document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
</script>
使用定时器,让scrollTo(x,y)中的y参数每次减少50,直到减少到0,则动画完毕。
<script>
(function(){
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(fn) {
setTimeout(fn, 16);
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop + document.documentElement.scrollTop;
if(oTop > 0){
scrollTo(0,oTop-50);
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
</script>
使用定时器,将scrollBy(x,y)中的y参数设置为-50。
<script>
(function(){
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(fn) {
setTimeout(fn, 16);
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop + document.documentElement.scrollTop;
if(oTop > 0){
scrollBy(0,-50);
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
</script>
如上代码存在一个缺陷,当页面内容较多时滚动到顶部需要花费很多时间。可以用时间来控制动画效果,假设回到顶部的动画效果共运动500ms。
<script>
(function(){
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(fn) {
setTimeout(fn, 16);
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
//获取当前毫秒数
var startTime = + new Date();
//获取当前页面的滚动高度
var b = document.body.scrollTop + document.documentElement.scrollTop;
var d = 500;
var c = b;
timer = requestAnimationFrame(function func(){
var t = d - Math.max(0,startTime - (+new Date()) + d);
document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;
timer = requestAnimationFrame(func);
if(t == d){
cancelAnimationFrame(timer);
}
});
}
</script>
|
|