网页上最简单的上下滚动-最使用的网页特效代码

DIV+CSS结合js控制页面滚动的效果，非常实用，兼容ie，ff。

<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> </head> <body> <div align="center"> <div id="container"> <a name="anchor0"></a> <div id="block0"> <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> <p>内容</p> <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> <p>内容</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> <p>内容</p> <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> <p>内容</p> <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> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> </div> </div> </body>

[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择

搜索

热门标签

网页上最简单的上下滚动-最使用的网页特效代码