js scrollTo 實作平緩 傳回頂部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>傳回頂部或底部</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<style type="text/css">
.go
{
width: 35px;
height: 70px;
z-index: 999;
opacity: 1;
position: fixed;
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||200)-(parseInt(this.currentStyle.marginBottom,10)||0)));
right: 2px;
bottom: 40%;
border-radius: 5px;
box-shadow: 0 0 10px #D2C5C5;
background-color: transparent;
display: none;
}
.go a
{
background: url(images/up_down.png) no-repeat;
display: block;
text-indent: 999em;
width: 37px;
margin: 5px;
border: 0;
overflow: hidden;
float: left;
}
.go .top
{
background-position: -5px 2px;
height: 22px;
width: 30px;
}
.go .top:hover
{
background-position: -43px 2px;
}
.go .bottom
{
background-position: -5px -50px;
height: 22px;
width: 30px;
}
.go .bottom:hover
{
background-position: -43px -50px;
}
.content
{
max-width: 640px;
height: 2000px;
margin: 0px auto;
background-color: Gray;
}
</style>
<script type="text/javascript">
var start = 0; //(開始)滾動的位置(onscroll方法中有指派)
var scroDIST = 100; //每次滾動的距離(機關：px)
var stime = 100; //每次滾動花費時間(機關：毫秒)
//顯示或隐藏傳回頂/底部層
window.onscroll = function () {
var $up_down = $("#go");
var scro = document.documentElement.scrollTop;
if (scro <= 0)
scro = document.body.scrollTop;
if (scro >= 60) {
$up_down.fadeIn(600);
} else if (scro < 60) {
$up_down.fadeOut(600);
}
start = document.documentElement.scrollTop;
if (start <= 0)
start = document.body.scrollTop;
};
//向下
function down() {
var d = setInterval(function () {
window.scrollTo(start, start + scroDIST);
start = start + scroDIST;
var pheight = document.body.scrollHeight;
if (start >= pheight) {
clearInterval(d);
}
}, stime);
}
//向上
function up() {
var d = setInterval(function () {
window.scrollTo(start, start - scroDIST);
start = start - scroDIST;
if (start <= 0) {
clearInterval(d);
}
}, stime);
}
</script>
</head>
<body>
<div class="content">
測試内容
</div>
<!-- [B]傳回頂/底部 -->
<div id="go" class="go">
<a title="傳回頂部" class="top" href="javascript:up();" target="_blank" rel="external nofollow" ></a><a title="傳回底部" class="bottom"
href="javascript:down();" target="_blank" rel="external nofollow" ></a>
</div>
<!-- [E]傳回頂/底部 -->
</body>
</html>
下載下傳位址： http://pan.baidu.com/s/1gdvkbeV
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)