“回到顶部”是目前内容比较多的网页常用的解决方式，能快速让用户回到页面的顶端。比如我经常去的旅游网站——马蜂窝，就有一个非常不错的“回到顶部”快捷按钮或者叫链接，特别喜欢这个火箭的图片，“回到顶部”不就是让用户像火箭一样快地返回地球(Top)么?

目前网络上有各种各样的样式，就像这个多元的世界，萝卜白菜，各有所爱，不信请看下图(此图来自度娘)：

这篇文章主要是想讨论一下目前比较常见的“回到顶部”功能的解决方案。

“回到顶部“(Back to Top)其实就是通过锚点(anchor)和链接(links)来实现在页内跳转。

锚的定义是节点的内容的某个区域可以是链接的目标或源。锚点就像普通链接的目标，唯一不同的是一个在页面内部的某一区域，一个是外部页面。 没有什么内容，直接看W3C School上的教程。

下面是一个简单的锚点应用的例子：

有了上面的理论基础，我们就可以开始尝试在我们的页面实现一个最简单的“回到顶端”。 大概的实现过程就是：

下面的例子就是一个具有最简单“回到顶端”功能的页面：

当然，上面的例子没有太多样式，只是简单的呈现出文字，你可以给“回到顶端”这个链接添加任何你想要的效果。

JQuery是目前最火的Javascript脚本库，由于其轻量这个特点，被广泛使用于各种网站中。 本节主要介绍如何用JQuery来实现一个“返回顶端”的按钮。

假如我们有这样一个简单的页面：

HTML:

CSS:

Image:

你也许会发现，我们这里的HTML页面结构里面，既没有设置锚点的代码，也看不到“返回顶端”的链接。 难道有问题？其实不然，请出大神JQuery。

JQuery Code:

针对上面的例子，我们可以尝试着将其改写成一个JQuery的插件。 因为水平有限，这个只做抛砖引玉之用。