锚链接加楼梯效果(同时支持移动端)

1、pc网页右侧经常会有楼梯效果，页面滑动到一定高度，楼梯出来，同时点击相应的楼层页面滑动到对应的位子，并且在不点击的时候，只是滑动液面的话，滑动到相应的楼层，左侧的楼梯相应的楼梯要高亮显示。（有的顶部也有这样的效果 ，原理一样方法也是一样的）。

2、说先html，css代码为

左侧或顶部楼层代码。左侧或者顶部由 position 控制，这个不影响。注意高亮显示的class是给 a 的父级。不参与楼梯的 class 属性是给 a 的。不能混淆。
<ul id="nav_one">
    <li class="current"><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
    <li><a href="#section-4">Section 4</a></li>
    <li><a href="#section-5">Section 5</a></li>
    <li><a href="index.html" class="external">查看演示一</a></li>
</ul>


对应页面楼层
<div class="section" id="section-1"></div>
<div class="section" id="section-2"></div>
<div class="section" id="section-3"></div>
<div class="section" id="section-4"></div>
<div class="section" id="section-5"></div>



css代码为 主要是有fixed属性并且有top值。同时支持开始的时候不是fixed在页面滑动到一定的高度时候nav变为fixed.
#nav{left:20px;position:fixed;98px;top:0;}

高亮显示代码
#nav .current a{background:#909090;color:#ededed;}

js调用代码

//filter代表 例如 楼层有一个是 返回顶部 这个在华东的时候不参与在内的。external这个属性一定是要给 a 的。不能给 a 的父级 ，否则会报错。调用方法的时候，是给楼层调用，不是给页面对应的区域调用。

$(document).ready(function(){

    $('#nav').onePageNav({

        filter: ':not(.external)',

        scrollThreshold: 0.25

    });

});

3、在页面上引入的js 有两个

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.scrollTo.js"></script>

<script type="text/javascript" src="js/jquery.nav.min.js"></script>

/**
 * jQuery.ScrollTo.js.
 */
;
(function(d) { var k = d.scrollTo = function(a, i, e) { d(window).scrollTo(a, i, e) };
    k.defaults = { axis: 'xy', duration: parseFloat(d.fn.jquery) >= 1.3 ? 0 : 1 };
    k.window = function(a) { return d(window)._scrollable() };
    d.fn._scrollable = function() { return this.map(function() { var a = this,
                i = !a.nodeName || d.inArray(a.nodeName.toLowerCase(), ['iframe', '#document', 'html', 'body']) != -1; if(!i) return a; var e = (a.contentWindow || a).document || a.ownerDocument || a; return d.browser.safari || e.compatMode == 'BackCompat' ? e.body : e.documentElement }) };
    d.fn.scrollTo = function(n, j, b) { if(typeof j == 'object') { b = j;
            j = 0 } if(typeof b == 'function') b = { onAfter: b }; if(n == 'max') n = 9e9;
        b = d.extend({}, k.defaults, b);
        j = j || b.speed || b.duration;
        b.queue = b.queue && b.axis.length > 1; if(b.queue) j /= 2;
        b.offset = p(b.offset);
        b.over = p(b.over); return this._scrollable().each(function() { var q = this,
                r = d(q),
                f = n,
                s, g = {},
                u = r.is('html,body'); switch(typeof f) {
                case 'number':
                case 'string':
                    if(/^([+-]=)?d+(.d+)?(px|%)?$/.test(f)) { f = p(f); break } f = d(f, this);
                case 'object':
                    if(f.is || f.style) s = (f = d(f)).offset() } d.each(b.axis.split(''), function(a, i) { var e = i == 'x' ? 'Left' : 'Top',
                    h = e.toLowerCase(),
                    c = 'scroll' + e,
                    l = q[c],
                    m = k.max(q, i); if(s) { g[c] = s[h] + (u ? 0 : l - r.offset()[h]); if(b.margin) { g[c] -= parseInt(f.css('margin' + e)) || 0;
                        g[c] -= parseInt(f.css('border' + e + 'Width')) || 0 } g[c] += b.offset[h] || 0; if(b.over[h]) g[c] += f[i == 'x' ? 'width' : 'height']() * b.over[h] } else { var o = f[h];
                    g[c] = o.slice && o.slice(-1) == '%' ? parseFloat(o) / 100 * m : o } if(/^d+$/.test(g[c])) g[c] = g[c] <= 0 ? 0 : Math.min(g[c], m); if(!a && b.queue) { if(l != g[c]) t(b.onAfterFirst);
                    delete g[c] } });
            t(b.onAfter);

            function t(a) { r.animate(g, j, b.easing, a && function() { a.call(this, n, b) }) } }).end() };
    k.max = function(a, i) { var e = i == 'x' ? 'Width' : 'Height',
            h = 'scroll' + e; if(!d(a).is('html,body')) return a[h] - d(a)[e.toLowerCase()](); var c = 'client' + e,
            l = a.ownerDocument.documentElement,
            m = a.ownerDocument.body; return Math.max(l[h], m[h]) - Math.min(l[c], m[c]) };

    function p(a) { return typeof a == 'object' ? a : { top: a, left: a } } })(jQuery);

/*
 * jQuery.nav.js
 
 */
;(function($) {
  $.fn.onePageNav = function(options) {
    var opts = $.extend({}, $.fn.onePageNav.defaults, options),
        onePageNav = {};
    
    onePageNav.sections = {};
    
    onePageNav.bindNav = function($el, $this, o) {
      var $par = $el.parent(),
          newLoc = $el.attr('href'),
          $win = $(window);

      if(!$par.hasClass(o.currentClass)) {
        if(o.begin) {
          o.begin();
        }
        onePageNav.adjustNav($this, $par, o.currentClass);
        $win.unbind('.onePageNav');
        $.scrollTo(newLoc, o.scrollSpeed, {
          easing: o.easing,
          offset: {
            top: -o.scrollOffset
          },
          onAfter: function() {
            if(o.changeHash) {
              window.location.hash = newLoc;
            }
            $win.bind('scroll.onePageNav', function() {
              onePageNav.scrollChange($this, o);
            });
            if(o.end) {
              o.end();
            }
          }
        });
      }
    };
    
    onePageNav.adjustNav = function($this, $el, curClass) {
      $this.find('.'+curClass).removeClass(curClass);
      $el.addClass(curClass);
    };
    
    onePageNav.getPositions = function($this, o) {
      var $nav = $this.find('a');
      
      if(o.filter !== '') {
        $nav = $nav.filter(o.filter);
      }
      
      $nav.each(function() {
        var linkHref = $(this).attr('href'),
            divPos = $(linkHref).offset(),
            topPos = divPos.top;
            
        onePageNav.sections[linkHref.substr(1)] = Math.round(topPos) - o.scrollOffset;
      });
    };
    
    onePageNav.getSection = function(windowPos, o) {
      var returnValue = '',
          windowHeight = Math.round($(window).height() * o.scrollThreshold);
      
      for(var section in onePageNav.sections) {
        if((onePageNav.sections[section] - windowHeight) < windowPos) {
          returnValue = section;
        }
      }
      return returnValue;
    };
    
    onePageNav.scrollChange = function($this, o) {
      onePageNav.getPositions($this, o);
      
      var windowTop = $(window).scrollTop(),
          position = onePageNav.getSection(windowTop, o);
          
      if(position !== '') {
        onePageNav.adjustNav($this,$this.find('a[href=#'+position+']').parent(), o.currentClass);
      }
    };
    
    onePageNav.init = function($this, o) {
      var didScroll = false,
          $nav = $this.find('a');
      
      if(o.filter !== '') {
        $nav = $nav.filter(o.filter);
      }

      $nav.bind('click', function(e) {
        onePageNav.bindNav($(this), $this, o);
        e.preventDefault();
      });
    
      onePageNav.getPositions($this, o);
    
      $(window).bind('scroll.onePageNav', function() {
        didScroll = true;
      });

      setInterval(function() {
        if(didScroll) {
          didScroll = false;
          onePageNav.scrollChange($this, o);
        }
      }, 250);
    };
    
    return this.each(function() {
      var $this = $(this),
          o = $.meta ? $.extend({}, opts, $this.data()) : opts;
      
      onePageNav.init($this, o);
    
    });
  };

  // default options
  $.fn.onePageNav.defaults = {
    currentClass: 'current',
    changeHash: false,
    easing: 'swing',
    filter: '',
    scrollSpeed: 750,
    scrollOffset: 0,
    scrollThreshold: 0.5,
    begin: false,
    end: false
  };

})(jQuery);