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

<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>
    
时间: 2024-07-31 20:56:27

网页上下滚动,带缓冲效果,返回顶部的相关文章

JS+CSS打造的仿惠惠网带缓冲效果的图片滚动

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS+CSS打造的仿惠惠网带缓冲效果的图片滚动丨上谷战国红|亿诚</title> <style>* {margin:0;paddin

js+css实现带缓冲效果右键弹出菜单

<!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-Typ

JS 带运动的返回顶部 小案例

带运动的返回顶部:当滚动条在滚动的时候,滚动鼠标的滚轮,应该让滚动条停止滚动,清掉定时器.下面的方法b 就是清掉的方法 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en&

java输入流[Reader,InputStream] 不带缓冲效果的基本流操作。以及中文乱码情况

Reader,InputStream用来读取资源的内容,资源可以是文件或者网络 首先有一个txt文件,文件中的内容如下 File f = new File("文件路径"); FileInputStream fis = new FileInputStream(f);//创建一个输入流,读取f中的内容到程序中来 //System.out.println(fis.read()); byte[] b = new byte[1024];//定义一个数组,保存读取的类容 int hasRead =

JS带缓冲效果打开、关闭、移动一个层

<!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" lang="gb2312"> <head> <title&

原生js实现缓动返回顶部

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ width: 1366px; height: 2000px; position: absolute; background-color

前端 css+js实现返回顶部功能

描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button onclick="returnTop()" id="btnTop" title="返回顶部">返回顶部</button> 3 </div> CSS: 1 /* return top */ 2 #btnTop { 3 display: none; 4 position: f

原生JS返回顶部,带返回效果

有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要什么样式都可以自己写上,再在上面设置一个id: 之后我们js中获取一下这个按钮的id,并且定义一个变量timer,方便接下来清除间隔器: 之后我们设置一个页面的滚动事件,在里面定义一个变量获取一下所滚动的高度: 再用一个判断语句来判断一下滚动的高度:我们在设置一个数来让按钮什么时候显示: var o

20款网页常用的返回顶部代码

jQuery网页滚动显示浮动导航带返回顶部按钮 css3悬浮返回顶部按钮悬停显示二维码特效 jQuery网页返回顶部固定层微信二维码代码 jQuery绿色的qq在线客服点击返回顶部代码 div css网页右侧返回顶部样式代码 jQuery响应式网页返回顶部按钮代码 jQuery win8扁平风格返回顶部和在线客服网站侧边栏代码 jquery扁平风格带二维码的页面滑动返回顶部按钮代码 jQuery仿威锋商城网站右侧悬浮层返回顶部代码 jQuery带微信二维码网页侧边返回顶部效果 jquery wi