网页上下滚动，带缓冲效果，返回顶部

浏览数：48 / 时间：2015年06月09日

<head>
    <style type="text/css">
    #container{
    text-align: left;
    background-color: #faf7ec;
    width: 500px;
    margin: 20px auto 0 auto;
    padding: 0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    }
    #block0, #block1, #block2, #block3, #block4, #block5 {
    border-top: solid 1px #785a3c;
    margin: 0;
    padding: 10px;
    }
    .active {
    background-color: #fff;
    }
    .visited {
    background-color: #ede7da;
    }
    #block0, #block0.active, #block0.visited {
    text-align: center;
    background-color: #a0dcf8;
    border-top: none;
    border-bottom: solid 4px #785a3c;
    }
    </style>
    <script>
    var ScrollWin = {
    w3c : document.getElementById,
    iex : document.all,
    scrollLoop : false,
    scrollInterval : null, // setInterval id
    currentBlock : null,   // object reference
    getWindowHeight : function(){
    if(this.iex) return (document.documentElement.clientHeight) ?
    document.documentElement.clientHeight : document.body.clientHeight;
    else return window.innerHeight;
    },
    getScrollLeft : function(){
    if(this.iex) return (document.documentElement.scrollLeft) ?
    document.documentElement.scrollLeft : document.body.scrollLeft;
    else return window.pageXOffset;
    },
    getScrollTop : function(){
    if(this.iex) return (document.documentElement.scrollTop) ?
    document.documentElement.scrollTop : document.body.scrollTop;
    else return window.pageYOffset;
    },
    getElementYpos : function(el){
    var y = 0;
    while(el.offsetParent){
    y += el.offsetTop
    el = el.offsetParent;
    }
    return y;
    },
    scroll : function(num){
    if(!this.w3c){
    location.href = "#"+this.anchorName+num;
    return;
    }
    if(this.scrollLoop){
    clearInterval(this.scrollInterval);
    this.scrollLoop = false;
    this.scrollInterval = null;
    }
    if(this.currentBlock != null) this.currentBlock.className = this.offClassName;
    this.currentBlock = document.getElementById(this.blockName+num);
    this.currentBlock.className = this.onClassName;
    var doc = document.getElementById(this.containerName);
    var documentHeight = this.getElementYpos(doc) + doc.offsetHeight;
    var windowHeight = this.getWindowHeight();
    var ypos = this.getElementYpos(this.currentBlock);
    if(ypos > documentHeight - windowHeight) ypos = documentHeight - windowHeight;
    this.scrollTo(0,ypos);
    },
    scrollTo : function(x,y){
    if(this.scrollLoop){
    var left = this.getScrollLeft();
    var top = this.getScrollTop();
    if(Math.abs(left-x) <= 1 && Math.abs(top-y) <= 1){
    window.scrollTo(x,y);
    clearInterval(this.scrollInterval);
    this.scrollLoop = false;
    this.scrollInterval = null;
    }else{
    window.scrollTo(left+(x-left)/10, top+(y-top)/10);
    }
    }else{
    this.scrollInterval = setInterval("ScrollWin.scrollTo("+x+","+y+")",20);
    this.scrollLoop = true;
    }
    }
    };
    ScrollWin.containerName = "container";
    ScrollWin.anchorName    = "anchor";
    ScrollWin.blockName     = "block";
    ScrollWin.onClassName   = "active";
    ScrollWin.offClassName  = "visited";
    </script>
    <title>网页上下滚动丨kiddy官网|影院座椅</title>
    </head>
    <body>
    <div align="center">
    <div id="container">
    <a name="anchor0"></a>
    <div id="block0">
    <br><br><hr>
    <a href="javascript:ScrollWin.scroll(‘1‘)">链接 1</a> |
    <a href="javascript:ScrollWin.scroll(‘2‘)">链接 2</a> |
    <a href="javascript:ScrollWin.scroll(‘3‘)">链接 3</a> |
    <a href="javascript:ScrollWin.scroll(‘4‘)">链接 4</a> |
    <a href="javascript:ScrollWin.scroll(‘5‘)">链接 5</a>
    </div>
    <a name="anchor1"></a>
    <div id="block1">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll(‘0‘); return false;">顶部</a>
    链接 1</h3>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <br><br><hr>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    </div>
    <a name="anchor2"></a>
    <div id="block2">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll(‘0‘); return false;">顶部</a>
    链接 2</h3>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    </div>
    <a name="anchor3"></a>
    <div id="block3">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll(‘0‘); return false;">顶部</a>
    链接 3</h3>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <br><br><hr>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    </div>
    <a name="anchor4"></a>
    <div id="block4">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll(‘0‘); return false;">顶部</a>
    链接 4</h3>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <br><br><hr>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    </div>
    <a name="anchor5"></a>
    <div id="block5">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll(‘0‘); return false;">顶部</a>
    链接 5</h3>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <br><br><hr>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    </div>
    </div>
    </div>
    </body>