JS做”返回顶部”按钮功能并实现滑动效果

JS做”返回顶部”按钮功能并实现滑动效果

By Corey ¶ Posted in 专业技术 ¶ Leave a reply

新浪微博上的”返回顶部”按钮，功能简单，却是十分实用。因为新浪微博内容是自动往下加载，往往会让页面生成得很长很长，看到某个地方时突然想快速地写条微博，动滚轮滚到手都累了也滚不回去，拖条虽然比较快捷但是要用户“往左，往上”两个动作有时也会觉得很不方便。置顶按钮的出现实在是十足地符合了“用户体验”这四个字。 如今自己在做作品时也立刻意识到这个按钮的重要性，今天也终于动手做了一下。

其实要实现这个功能十分简单，最快的方法就是用锚点

<a href=”#ac”>Button</a>

.

.

.

<a name=”ac”></a>

这样点击 Button 就可以把浏览器当前窗口的顶部写位到name=ac的a标签的位置，无论这个a在哪里。

不过个人不是很愿意在页面里随处放<a>，所以虽然要JS实现。

用JS也不难：location.hash=”ac”; 这句也可以让你实现刚才那个效果。不过要是真的不想用<a>呢？

复杂的这里且不讨论，我就写一下怎么返回页面顶部，一个函数可以搞定：window.scrollTo(x,y) （参数x,y这就不多做解释了）

返回顶部的可以直接写 window.scrollTo(0,0)，暂时没发现这样写会有什么兼容性问题。

而当你这样写以后，你会发现页面 “Bil” 一下就瞬跳到页头了，感觉没新浪微博那个快速而又平滑地滚回顶部的那么爽。顿时，我想到的是用setInterval()，让浏览器自己快速滚回去而又不错失沿途风景。

大概思路是：先获取当前浏览器窗口的垂直偏移量Y，然后让窗口每隔大概几十毫秒就往上滚一段距离，像是在放多格电影一样的那个效果。

不过有个比较麻烦的问题是，获取垂直偏移量的方法，有很多兼容性问题，在经过多次试验之后，终于 …… 我用JQ解决了这个麻烦（准确来说是避开了麻烦，JQ就是这个好，帮我们解决了很多兼容性问题）

这里贴出代码：





speed (毫秒值)影响速度，smooth(每次回滚幅度)影响滑动效果的平滑度。上面两种算法，一种是速度是线性的，一种是抛物线的，比较过效果我觉得抛物线的那种算法更舒心点。嘻嘻

不过再细心一点会发现，这两个算法都有一个bug —— 就是执行一次这个函数后，可能以后都不能再往下滚了（除非你刷新），它会自动滚回顶部。对！setInterval还在不断执行。为什么？不是设了t>0时才回滚吗？滚回顶部时，top=0，就马上停了呀！

事实是，不可能会有t<=0。经过浮点运算的 t 不再是整型而是浮点型，而稍微学过数据类型基础的都知道浮点数是不可以达到真实的0值的，在C编程时两个浮点数f1 , f2作比较时（例如在做二分法算法时）断送 f1 是否等于 f2 ，不是写f1 – f2 == 0，而是 f1 – f2 <= 0.000001 。

所以这里的 t>0 写法不好，应该是 t>0.1 。

This entry was posted in 专业技术 by Corey. Bookmark the permalink.