jQuery 底部漂浮导航当前位置突出 + 锚点平滑滚动
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> * { margin:0; padding:0; } #nav { width:100%; height:40px; line-height:40px; font-size:14px; background-color:#333; text-align:center; position:fixed; bottom:0; list-style:none; } #nav li { float:left; } #nav a { display:block; text-decoration:none; color:#fff; padding:0 20px; margin-left:-3px; } #nav a:hover { background-color:#222; } #nav .current a { background-color:#f60; } #box { width:800px; margin:0 auto; list-style:none; } #box li { height:1000px; display:block; background-color:#f00; } #box #a1 { height:1000px; background-color:#f00; } #box #a2 { height:1000px; background-color:#f20; } #box #a3 { height:1000px; background-color:#f40; } #box #a4 { height:1000px; background-color:#f60; } #box #a5 { height:1000px; background-color:#f90; } </style> </head> <body> <ul id="box"> <li id="a1"><a name="a1"></a>a1</li> <li id="a2"><a name="a2"></a>a2</li> <li id="a3"><a name="a3"></a>a3</li> <li id="a4"><a name="a4"></a>a4</li> <li id="a5"><a name="a5"></a>a5</li> <li id="a6"><a name="a6"></a>a6</li> </ul> <ul id="nav"> <li class="current"><a href="#a1">首页</a></li> <li><a href="#a2">公司简介</a></li> <li><a href="#a3">产品展示</a></li> <li><a href="#a4">新闻中心</a></li> <li><a href="#a5">资质认证</a></li> <li><a href="#a6">联系我们</a></li> </ul> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script> <script> (function(e){e.fn.onePageNav=function(l){var g=e.extend({},e.fn.onePageNav.defaults,l),c={};c.sections={};c.bindNav=function(a,b,d,f){a.find("a").bind("click",function(m){var h=e(this),i=h.parent(),j=h.attr("href"),k=e(document);if(!i.hasClass(b)){c.adjustNav(a,i,b);k.unbind(".onePageNav");e.scrollTo(j,f,{onAfter:function(){if(d)window.location.hash=j;k.bind("scroll.onePageNav",function(){c.scrollChange(a,b)})}})}m.preventDefault()})};c.adjustNav=function(a,b,d){a.find("."+d).removeClass(d);b.addClass(d)}; c.getPositions=function(a){a.find("a").each(function(){var b=e(this).attr("href"),d=e(b).offset();d=d.top;c.sections[b.substr(1)]=Math.round(d)})};c.getSection=function(a){var b="",d=Math.round(e(window).height()/2);for(var f in c.sections)if(c.sections[f]-d<a)b=f;return b};c.scrollChange=function(a,b){c.getPositions(a);var d=e(window).scrollTop();d=c.getSection(d);d!==""&&c.adjustNav(a,a.find("a[href=#"+d+"]").parent(),b)};c.init=function(a,b){c.bindNav(a,b.currentClass,b.changeHash,b.scrollSpeed); c.getPositions(a);e(document).bind("scroll.onePageNav",function(){c.scrollChange(a,b.currentClass)})};return this.each(function(){var a=e(this),b=e.meta?e.extend({},g,a.data()):g;c.init(a,b)})};e.fn.onePageNav.defaults={currentClass:"current",changeHash:false,scrollSpeed:750}})(jQuery); </script> <script> $(document).ready(function() { function filterPath(string) { return string .replace(/^\//,'') .replace(/(index|default).[a-zA-Z]{3,4}$/,'') .replace(/\/$/,''); } var locationPath = filterPath(location.pathname); var scrollElem = scrollableElement('html', 'body'); $('a[href*=#]').each(function() { var thisPath = filterPath(this.pathname) || locationPath; if ( locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/,'') ) { var $target = $(this.hash), target = this.hash; if (target) { var targetOffset = $target.offset().top; $(this).click(function(event) { event.preventDefault(); $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { location.hash = target; }); }); } } }); // use the first element that is "scrollable" function scrollableElement(els) { for (var i = 0, argLength = arguments.length; i <argLength; i++) { var el = arguments[i], $scrollElement = $(el); if ($scrollElement.scrollTop()> 0) { return el; } else { $scrollElement.scrollTop(1); var isScrollable = $scrollElement.scrollTop()> 0; $scrollElement.scrollTop(0); if (isScrollable) { return el; } } } return []; } }); </script> <script> $(document).ready(function() { $('#nav').onePageNav(); }); </script> <!-- <script> window.onload = window.onscroll = function() { var nav = document.getElementById("nav"); var links = nav.getElementsByTagName("a"); var top = document.body.scrollTop || document.documentElement.scrollTop; //(top > 100) ? nav.style.display = "block" : nav.style.display = ""; for(var i=0; i<links.length; i++) { //var myy = if(top < 1000) { links[i].className = ""; links[0].className = "current"; } else { links[i].className = ""; } if(top>=1000 && top < 2000) { links[i].className = ""; links[1].className = "current"; } else { links[i].className = ""; } if(top>=2000 && top < 3000) { links[i].className = ""; links[2].className = "current"; } else { links[i].className = ""; } } } </script> --> </body> </html>
http://trevordavis.net/blog/jquery-one-page-navigation-plugin
