javascript控制页面自动滚动
需求说明
- 1，有一个很长的页面，需要一打开这个页面就自动向下滚动
- 2，在滚动过程中，用户点击滚动条或其他地方，滚动事件能够马上停止。我的导航条是始终悬浮在屏幕顶部的，锚链接都是链接的这一个页面的不同地方，所以我 希望在页面滚动过程中，点击导航链接能跳转过去，或者用户不喜欢页面自己滚动可以自己拖动滚动条去自己想看的地方。我网上找的页面自动滚动的效果，在滚动 到页面底部之前，都没办法停下来或点击链接
- 3，如果可以的话，希望可以在第一次滚动到页面底部之后，能够自动跳转到页面顶部，并不在滚动了（除非刷新）
2013-08-09：进行了部分修改，兼容xhtml（CSS1Compat）和backcompat模式
源代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div style="height:1000px"></div>
<script>
var timer, scrollHeight, viewHeight, step = 20, sTop = 0,isScrict=document.compatMode=='CSS1Compat';
document.onclick = function () { clearInterval(timer); }
function Move() {
//设置滚动前获取当前的的滚动高度和sTop比较，如果小于sTop或者和sTop的差距大于step定义的，说明拖拽过滚动条了
var nowScrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
if (nowScrollTop < sTop || (nowScrollTop - top > step)) clearInterval(timer);
sTop += step;
document.documentElement.scrollTop = document.body.scrollTop = sTop;
if (sTop + viewHeight > scrollHeight) {//滚动到底部
clearInterval(timer);
document.documentElement.scrollTop = document.body.scrollTop = 0//跳转到顶部
}
}
window.onresize = function () {
viewHeight = document[isScrict?'documentElement':'body'].clientHeight;
scrollHeight = document[isScrict?'documentElement':'body'].scrollHeight;
}
window.onload = function () {
window.onresize();
timer = setInterval(Move, 100);
}
</script>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：javascript控制页面自动滚动