第一种方法:用css控制图片
<style type="text/css">
#scrollBar a {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("../img/0121.png");
background-origin: padding-box;
background-position: 0 0;
background-repeat: no-repeat;
background-size: auto auto;
cursor: pointer;
display: block;
height: 57px;
overflow-x: hidden;
overflow-y: hidden;
text-indent: -2000em;
width: 19px;
}
a {
-moz-text-blink: none;
-moz-text-decoration-color: -moz-use-text-color;
-moz-text-decoration-line: none;
-moz-text-decoration-style: solid;
color: #333333;
}
</style>
<div id="scrollBar" style="position: fixed; right: 50%; margin-right: -510px; bottom: 75px; display: block;">
<a href="javascript:void(0)" hidefocus="true" οnclick="window.scrollTo(0,0); " >回到顶部</a>
<!--<a style=”display: block; margin-top: 10px;” οnclick=”$(‘html,body’).animate({scrollTop: 0}, 1000);” href=”javascript:;”>回到顶部</a>-->
</div>
第二种方法:
<script language="javascript">
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);
}
}
</script>
<a href="#" οnclick="goTop();return false;" style="font-size:15pt;color:#CC0000;text-align:right;">回到顶部</a>
第三种方法:
<a οnclick="window.scrollTo(0,0);return false;" href="#top">
返回顶部
<img src="../img/101.png">
</a>