Entries (RSS)
Comments (RSS)

返回页首(Back to Top)解决方案

Oct 17, 2005 Author: | Filed under: Uncategorized

A (slightly) better technique for “Back to Top” links.

大致内容如下：

一般返回页首(Back to Top)解决方法是，最前面加 anchor

或者

后面返回处直接写链接

笔者认为缺点有二：

1.多余的标签

2.地址栏后面跟个#top，难看。

笔者推荐

而且还可以加入一些翻滚效果

</p> <p> <script type="text/javascript"></p> <p> function backToTop() {</p> <p> var x1 = x2 = x3 = 0;</p> <p> var y1 = y2 = y3 = 0;</p> <p> if (document.documentElement) {</p> <p> x1 = document.documentElement.scrollLeft || 0;</p> <p> y1 = document.documentElement.scrollTop || 0;</p> <p> }</p> <p> if (document.body) {</p> <p> x2 = document.body.scrollLeft || 0;</p> <p> y2 = document.body.scrollTop || 0;</p> <p> }</p> <p> x3 = window.scrollX || 0;</p> <p> y3 = window.scrollY || 0;</p> <p> var x = Math.max(x1, Math.max(x2, x3));</p> <p> var y = Math.max(y1, Math.max(y2, y3));</p> <p> window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));</p> <p> if (x > 0 || y > 0) {</p> <p> window.setTimeout("backToTop()", 25);</p> <p> }</p> <p> }</p> <p> </script></p> <p> </head></p> <p> <body style="margin:20px 200px"></p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p><a href="#" onclick="backToTop(); return false">Back to Top</a></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

Leave a reply

Flickr PhotoStream

ubuntu_avant_window_navigator

ubuntustudio theme

GNU-xga

Screenshot-x-session-manager

Screenshot-synaptic-1

Recent Posts

Recent Comments

edhardy on 关于 css,js 文件后面的数字串
test@test.coom on jQuery 的缺点
jessebear on 10 Features You’ll Find Only In Opera
freezesoul on firefox 拿不到框架中的 getSelection()
James on 简单的 php+mysql 留言板代码

Pages

关于这里

Categories

Tags

css flickr javascript

Blogroll

Meta

Advertising

Most Popular

Recent Comments

Latest Entries