JavaScript

用 JavaScript 实现变速回到顶部

May 18th, 2009 Add Comment

一般网页的下方都会放置一个置顶按钮, 尤其是页面底部没有导航的网页, 这样可以帮助访客重新找到导航或者重温一遍广告 (想得真美). 随着近几年来 JavaScript 的应用日渐广泛, 滑动效果无处不在, 于是我也跟跟风, 将置顶功能做成了滑动效果. 后来为了更贴合物理特征, 改造做成了减速的滑动效果.

首先说一下原理吧. 我们会获取滚动条到页面顶部的距离, 然后上移一定的距离; 再获取滚动条到页面顶部的距离, 上移一定的距离 (比上一次小一点); ...

JavaScript 代码:

/**
 * 回到页面顶部
 * @param acceleration 加速度
 * @param time 时间间隔 (毫秒)
 **/
function goTop(acceleration, time) {
	acceleration = acceleration || 0.1;
	time = time || 16;
 
	var x1 = 0;
	var y1 = 0;
	var x2 = 0;
	var y2 = 0;
	var x3 = 0;
	var y3 = 0;
 
	if (document.documentElement) {
		x1 = document.documentElement.scrollLeft || 0;
		y1 = document.documentElement.scrollTop || 0;
	}
	if (document.body) {
		x2 = document.body.scrollLeft || 0;
		y2 = document.body.scrollTop || 0;
	}
	var x3 = window.scrollX || 0;
	var y3 = window.scrollY || 0;
 
	// 滚动条到页面顶部的水平距离
	var x = Math.max(x1, Math.max(x2, x3));
	// 滚动条到页面顶部的垂直距离
	var y = Math.max(y1, Math.max(y2, y3));
 
	// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 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);
	}
}

document.documentElement.scrollTop, document.body.scrollTop, window.scrollY 其实都是一样的, 但它们只在某些浏览器中起作用. 至于那哪个在哪些浏览器起作用可以自己调试一下.

HTML 代码:

<a href="#" onclick="goTop();return false;">TOP</a>

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 用 JavaScript 实现变速回到顶部

60 Comments 8 Trackbacks

whisperer | Jul 31st, 2009 at 01:37

这个，有个特点很有意思，它必须到顶部之后你才能有其他动作，中途想让它停下来那是不可能的

问个小白问题，有没有办法可以想停的时候就让它停止向上呢
whisperer | Jul 27th, 2009 at 21:36

@mg12

囧，我看的就是这篇文章~~我还想要个回到底部的

最好是再自由落体回到底部
mg12 | Jul 27th, 2009 at 10:26

@whisperer
http://www.neoease.com/javascript-go-top/
Calcifer | Jul 26th, 2009 at 10:04

@whisperer
汗死…… 你很懒，建议你直接去那个http://ishawn.net网站扒JS代码最简单
whisperer | Jul 26th, 2009 at 09:37

@Calcifer
我没搜到啊可能搜索词不对，你给我个搜索链接吧
Calcifer | Jul 26th, 2009 at 09:27

@whisperer
这个效果网上有现成的…… 带图标的，还能上下左右呢，你还真的要我在这贴代码？自己搜搜吧，不难的
whisperer | Jul 26th, 2009 at 09:10

@Calcifer

超级想做个像http://ishawn.net/的那样的，太帅了

不会啊
Calcifer | Jul 26th, 2009 at 09:07

@whisperer
Google了下，网上一大堆关于向下滚屏的，关键字“js 向下滚屏” 你自己DIY吧
whisperer | Jul 26th, 2009 at 06:50

我想做个回到底部的...谁能告诉我改怎么写....
mg12 | Jun 18th, 2009 at 09:36

@me
哈哈~ 越来越讲究了. 下次我优化一下.

@MakLu
如果 JavaScript 被禁用就会用 HTML 的锚点链接功能. 这个只为了效果.

@keiv
Which home button? I don't know what do you talking about.
keiv | Jun 17th, 2009 at 23:24

why not use home button?
Sorry for my mistake
MakLu | Jun 13th, 2009 at 02:42

确实很滑很好玩，但是 …… 有啥意义呢？
为啥不用html的锚点连接呢？
琳儿生活家居 | Jun 12th, 2009 at 13:21

不错唉。。。大家都借用了哦。。。测试不错。。
me | Jun 2nd, 2009 at 11:45

不是很好。用阻尼原理会更ok些～
断峰狼 | May 31st, 2009 at 13:20

喜欢点 top，一下子就回到上面了，好玩~
mg12 | May 30th, 2009 at 11:08

@chisdy
呵呵, 但我的博客是用 jQuery 实现的. 各有各的好处吧.

@shine
我是用 HTML 敲的.

@Alex
不能通过 ID 定位, 应该可以适用所有主题. 如果不行, 证明那个主题有 JS 脚本错误.
chui | May 29th, 2009 at 01:29

不错不错的说
austin | May 29th, 2009 at 01:28

大晚上的都睡了
汤加丽 | May 27th, 2009 at 10:26

博客收藏了，以后经常来看看你...hehe
汤加丽 | May 27th, 2009 at 10:26

谢谢博主我找到了我需要的东西...
Alex | May 24th, 2009 at 21:02

@吖Bee
其实我也不晓得到底是不是jQuery了，我只看到里是一大推我看不懂的代码，然后直接把文件加载就OK了。。
吖Bee | May 24th, 2009 at 11:13

@Alex
他的好像不是用jQuery实现的~代码很多...
xinshuai | May 21st, 2009 at 22:57

感谢博主的教程，终于搞定了。贵站已做连接。希望博主也给小站也连接上~~谢谢
alertpay | May 20th, 2009 at 16:44

不错的文章。
Showfom | May 20th, 2009 at 15:57

不错不错的说~~~
Alex | May 20th, 2009 at 12:50

我的博客现在用着笑傲人生提供的滑动JS文件，但在文章里面配合Mail to Commenter插件使用就有问题，一般都不是平滑移动而是跳转一下然后在平滑移动。。这个文章提供的代码能不能通过ID来进行定位的？？
PS：JS方面我不是很熟悉。。。
shine | May 20th, 2009 at 10:14

你好朋友，请问，我设置好了LINKS页面
但是我想像你这样，http://www.neoease.com/links/
分类名称排列的，要如何设置?
chisdy | May 20th, 2009 at 01:01

@welee
我也是用Jquery去实现的，代码多得惨了，而且为了这点效果，加载Jquery太不值得了。
这代码不错，简洁，看着就舒服。
mg12 | May 20th, 2009 at 00:04

@wlsy
谢谢更正, 我更新下.
wlsy | May 19th, 2009 at 23:47

稍微正更下，这个不是滑动门哈。滑动门一般指应用到一个图像在另一个图像上的滑动，比较常见的是例子就是导航栏的圆角。
mg12 | May 19th, 2009 at 20:15

@Rui
我的没减速, 我的 jQuery 实现的, 懒得改. 不过我发布的主题是减速置顶的.

@Xiao3
那你做个锚呗.

@Jutoy , @拆組達人
(- -!) 有这么好玩吗?

@bolo
我奶奶不会上网, 其他家的我管不着了.

@Rui
呵呵~ 我这里没减速, 到 http://demo.neoease.com 去看看吧.
Rui | May 19th, 2009 at 19:25

@joel
当然没有禁用，我好好禁用这些干嘛。。。
其他人的INOVE没问题，就这里没有减速了。。。
bolo | May 19th, 2009 at 16:14

终于搞明白了，但像inove这样一开始就这么快会不会吓倒老人家呢
austin | May 19th, 2009 at 14:55

呵呵，抢地板！
三戒 | May 19th, 2009 at 14:14

comments test.
拆組達人 | May 19th, 2009 at 14:12

呵呵，挺好玩的說，剛剛也玩了幾次說！
Jutoy | May 19th, 2009 at 13:41

可以通过JavaScript做出描点间滑动的动态效果，mg12的这个模板我喜欢就是返回顶部那个效果，每次来都玩几次才走……囧…
8suo | May 19th, 2009 at 13:01

google chrome 可以用。
Xiao3 | May 19th, 2009 at 12:32

请问下，我要是想做一个按钮，在一片文章比较长的时候实现回到页面中部的，改怎么实现？
爱月 | May 19th, 2009 at 10:57

这里每天都这么热闹。。。完全抢不上家具。。。
joel | May 19th, 2009 at 08:55

@Rui
没换,是不是你的浏览器没有完全载入或禁用了js?
Rui | May 19th, 2009 at 04:58

mg把自己的换成不减速的了？
苏洋 | May 19th, 2009 at 02:13

扒了你很多东西..特地跑来道谢...希望MG继续努力...让俺们有更多可以扒的东西哈..
苏洋 | May 19th, 2009 at 02:05

呵呵...来晚了...
joel | May 19th, 2009 at 01:13

@bruce
可以自行替换,网上搜来的
welee | May 19th, 2009 at 00:58

我是用 JQuery 的方法来实现滑动效果，不过你的代码简洁许多。
bruce | May 19th, 2009 at 00:44

mg12大嘎：为什么我的表情插件上面的小头像跟你的不一样的?
alluse | May 19th, 2009 at 00:11

呵呵，抢地板！
joel | May 19th, 2009 at 00:11

大晚上的都睡了?
joel | May 19th, 2009 at 00:09

抢沙发啦,hoho,还是头一次哦

Comment pages

1 2 Next »

Add Comment Read Article

JavaScript

用 JavaScript 实现变速回到顶部

JavaScript 代码:

HTML 代码:

JavaScript, Tutorial