js回到顶部

2021-10-09 11:28:24

1，使用瞄标记

使用HTML锚标记最简单，就是看起来有点不好看，点击后会在地址栏显示这个锚标记，其它的倒没什么。

页面顶部放置：

放置位置在<body>标签之后随便找个地方放都可以，只要靠近顶部即可。

页面底部放置：

使用

window.scrollTo(x,y) 绝对定位

window.scrollBy(dx,dy)相对定位

scrollTo(0,0)到最顶部

渐进式返回顶部，要好看一些

回到顶部后，我们发现往下滚动时，页面自动向上滚动，说明我们的pageScroll函数并没有清除定时器。为什么？

因为函数前面清除定时器后没有return;后面的setTimeout又执行了。

加上return 或者把 if语句放在函数的后面就可以了。

clearTimeout()清除上个setTimeout的句柄。

window.clearTimeout(setTimeout("0")-1);

，setTimeout返回的值似乎没什么规律，但紧挨着的两个setTimeout()方法返回值却是有关系的，即相差1，所以

clearTimeout(setTimeout("0")-1)起作用。

当然clearTimeout(setTimeout("")-1)一样起作用。

获取页面滚动的位置:

获取页面滚动的位置一般用window.pageXOffset，有些浏览器用的是document.documentElement.scrollLeft，但是chrome的这个参数值恒为0.

返回顶部功能做成了滑动效果。后来为了更贴合物理特征，改造做成了减速的滑动效果。

首先说一下原理吧，我们会获取滚动条到页面顶部的距离，然后上移一定的距离；再获取滚动条到页面顶部的距离，上移一定的距离（比上一次小一点）;以此类推 ...

继续阅读