- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
目前流行的DIV+JS内容滚动导航特效，点击某一个导航的时候，页面会滚动至对应的内容，给你的网页增加点动感元素，扩展性好，你可以无限制增加导航项目。简单美化了一下，要用的朋友自己美化一下吧。
<html> <head> <title>滚动导航</title> <style type="text/css"> #container{ text-align: left; background-color: #faf7ec; width: 499px; margin: 20px auto 0 auto; padding: 0; font-family:Arial, Helvetica, sans-serif; } #block0, #block1, #block2, #block3, #block4, #block5 { border-top: solid 1px #785a3c; margin: 0; padding: 10px; } #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, currentBlock : null, 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); }, // www.mb5u.com 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')">ASP</a> | <a href="javascript:ScrollWin.scroll('2')">PHP</a> | <a href="javascript:ScrollWin.scroll('3')">JSP</a> | <a href="javascript:ScrollWin.scroll('4')">AJAX</a> | <a href="javascript:ScrollWin.scroll('5')">EXT</a> </div> <a name="anchor1"></a> <div id="block1"> <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">回到顶部</a> ASP</h3> <p>内容</p> <p>内容</p> </div> <a name="anchor2"></a> <div id="block2"> <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">回到顶部</a> PHP</h3> <p>内容</p> <p>内容</p> </div> <a name="anchor3"></a> <div id="block3"> <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">回到顶部</a> JSP</h3> <p>内容</p> <p>内容</p> </div> <a name="anchor4"></a> <div id="block4"> <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">回到顶部</a> AJAX</h3> <p>内容</p> <p>内容</p> </div> <a name="anchor5"></a> <div id="block5"> <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">回到顶部</a> EXT</h3> <p>内容</p> <p>内容</p> </div> </div> </div> </body> </html>