1,使用瞄标记
使用HTML锚标记最简单,就是看起来有点不好看,点击后会在地址栏显示这个锚标记,其它的倒没什么。
页面顶部放置:
<a name="top" id="top"></a>
放置位置在<body>标签之后随便找个地方放都可以,只要靠近顶部即可。
页面底部放置:
<a href="#top" target="_self">返回顶部</a>
使用
window.scrollTo(x,y) 绝对定位
window.scrollBy(dx,dy)相对定位
scrollTo(0,0)到最顶部
渐进式返回顶部,要好看一些
function pageScroll(){ if(window.pageYOffset==0) { clearTimeout(window.scrolldelay); alert(window.scrolldelay); } window.scrollBy(0,-10); window.scrolldelay=setTimeout('pageScroll()',100); }
<a href="#" onclick="pageScroll(); return false;">回到顶部3</a>
回到顶部后,我们发现往下滚动时,页面自动向上滚动,说明我们的pageScroll函数并没有清除定时器。为什么?
因为函数前面清除定时器后没有return;后面的setTimeout又执行了。
加上return 或者把 if语句放在函数的后面就可以了。
clearTimeout()清除上个setTimeout的句柄。
window.clearTimeout(setTimeout("0")-1);
,setTimeout返回的值似乎没什么规律,但紧挨着的两个setTimeout()方法返回值却是有关系的,即相差1,所以
clearTimeout(setTimeout("0")-1)起作用。
当然clearTimeout(setTimeout("")-1)一样起作用。
获取页面滚动的位置:
function getScrollingPosition() { var position=[0,0]; if(window.pageYOffset) { position=[ window.pageXOffset, window.pageYOffset ]; } else if(document.documentElement.scrollTop&&document.documentElement.scrollLeft!=0) { position=[ document.documentElement.scrollLeft, document.documentElement.scrollTop ]; } else if(document.body.scrollTop) //基本上已被淘汰 { position=[ document.body.scrollLeft, document.body.scrollTop ]; } return position; } window.onscroll=function() { var scrollpos=getScrollingPosition(); document.title=scrollpos[1]; }
获取页面滚动的位置一般用window.pageXOffset,有些浏览器用的是document.documentElement.scrollLeft,但是chrome的这个参数值恒为0.
返回顶部功能做成了滑动效果。后来为了更贴合物理特征, 改造做成了减速的滑动效果。
首先说一下原理吧,我们会获取滚动条到页面顶部的距离,然后上移一定的距离;再获取滚动条到页面顶部的距离,上移一定的距离(比上一次小一点);以此类推 ...
/** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; var position=getScrollingPosition(); var x,y; x=position[0]; y=position[1]; // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小 var speed = 1 + acceleration; window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); // 如果距离不为零, 继续调用迭代本函数 if(x > 0 || y > 0) { var invokeFunction = "goTop(" + acceleration + ", " + time + ")"; window.setTimeout(invokeFunction, time); } }
关于除法
如果结果太大或太小,结果就是Infinity 或 -Infinity
如果某个运算数为NaN,结果就是NaN
0除一个非无穷大的数字,结果为NaN.