1. 创建页面html内容，添加出现回到顶部按钮的位置，如页脚部分，添加如下代码：
```html
```
2. 引入jquery库，在页面中引入jquery库，代码如下：
```html
<script src=\"/jquery-latest.js\"></script>
```
3. 设置返回顶部按钮CSS样式，如背景图、位置等，具体代码如下：
```css
/*将回到顶部按钮定位到右下角*/
#returnTop{position:fixed;right:20px;bottom:20px;display:none; }
#returnTop a{background:url(images/return_top.gif) no-repeat;display:block;width:54px;height:48px;text-indent:-999em;overflow:hidden;}
#returnTop a:hover{background-position:0 -50px}
/*当滚动条的位置处于距顶部100像素以下时， 返回顶部按钮出现*/
```
4. 设置jQuery代码，控制滚动条滚动到距离顶部100像素范围时，显示出返回顶部按钮，代码如下：
```js
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$(\"#returnTop\").fadeIn(500);
}
else
{
$(\"#returnTop\").fadeOut(500);
}
});
```
5. 为返回顶部按钮绑定click事件，实现点击按钮时的滚动动画效果，代码如下：
```js
$(\"#returnTop\").click(function(){
$(ody,html).animate({scrollTop:0},1000);
return false;
});
````
6. 最后，在页面最后添加其他返回顶部按钮的js配置，例如滚动鼠标手轮来返回顶部按钮， 代码如下：
```js
$(window).bind(\"mousewheel\", function() {
$(\"html, body\").animate({
scrollTop: 0
}, 600);
});
1、jQuery网页返回顶部按钮的原理：
当网页中滚动条滚动到页面底部出现返回顶部按钮，鼠标点击返回顶部按钮，网页便会动态滚动到页面顶部。原理上类似，但具体原理更是复杂，主要有三步：
（1）首先要获取滚动条滚动的距离（即scrollTop属性，用jQuery可以使用$(window).scrollTop()获取），以及页面底部到网页顶部区域的高度（即scrollHeight属性）；
（2）接着，当滚动条达到页面底部时，可以用来判断页面底部距离页面顶部的距离已经大于scrollHeight了，也就是出现返回顶部的按钮；
（3）当点击返回顶部按钮时，采用慢慢改变scrollTop属性的值，让滚动条慢慢移动到页面顶部。
2、jQuery网页返回顶部按钮的制作流程：
（1）添加html元素代码：在网页中添加一个返回顶部按钮，用html代码实现，如：
返回顶部
；
（2）添加css样式代码：设定返回顶部按钮的显示样式，如：
#backtop {width:150px;height:50px;background:#ccc;text-align:center;position:fixed;right:20px;bottom:20px;display:none;}
（3）添加jQuery代码：判断当滚动条至于页面底部时，返回顶部按钮显示：
$(document).ready(function(){
$(window).scroll(function(){
if ($(document).scrollTop() >0 ) {
$(“#backtop”).fadeIn();
} else {
$(“#backtop”).fadeOut();
}
});
})
然后再去控制滚动条滚动到页面顶部，如：
$(document).ready(function(){
$(“#backtop”).click(function(){
$(\"html,body\").animate({scrollTop:0},500);
});
