资源描述：
《js实现页面置顶效果.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、JS实现页面返回顶部的效果一般网页的下方都会放置一个置顶按钮,尤其是页面底部没有导航的网页,这样可以帮助访客重新找到导航或者重温一遍广告(想得真美).随着近几年来JAVASCRIPT的应用日渐广泛,滑动效果无处不在,于是我也跟跟风,将置顶功能做成了滑动效果.后来为了更贴合物理特征,改造做成了减速的滑动效果.首先说一下原理吧.我们会获取滚动条到页面顶部的距离,然后上移一定的距离;再获取滚动条到页面顶部的距离,上移一定的距离...JAVASCRIPT代码:/***回到页面顶部*@paramacceleration加速
2、度*@paramtime时间间隔(毫秒)**/functiongoTop(acceleration,time){acceleration=acceleration
3、
4、0.1;time=time
5、
6、16;varx1=0;vary1=0;varx2=0;vary2=0;varx3=0;vary3=0;if(document.documentElement){x1=document.documentElement.scrollLeft
7、
8、0;y1=document.documentElement.scrollTop
9、
10、
11、0;}if(document.body){x2=document.body.scrollLeft
12、
13、0;y2=document.body.scrollTop
14、
15、0;}varx3=window.scrollX
16、
17、0;vary3=window.scrollY
18、
19、0;//滚动条到页面顶部的水平距离varx=Math.max(x1,Math.max(x2,x3));//滚动条到页面顶部的垂直距离vary=Math.max(y1,Math.max(y2,y3));//滚动距离=目前距离/速度,因为距离原来越小,速度是大于1
20、的数,所以滚动距离会越来越小varspeed=1+acceleration;window.scrollTo(Math.floor(x/speed),Math.floor(y/speed));//如果距离不为零,继续调用迭代本函数if(x>0
21、
22、y>0){varinvokeFunction="goTop("+acceleration+","+time+")";window.setTimeout(invokeFunction,time);}}document.documentElement.scrollTop,doc
23、ument.body.scrollTop,window.scrollY其实都是一样的,但它们只在某些浏览器中起作用.至于那哪个在哪些浏览器起作用可以自己调试一下.HTML代码:TOP
