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

Posted 2020-09-01 haonanElva

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

2、说先html，css代码为

 1 左侧或顶部楼层代码。左侧或者顶部由 position 控制，这个不影响。注意高亮显示的class是给 a 的父级。不参与楼梯的 class 属性是给 a 的。不能混淆。
 2 <ul id="nav_one">
 3     <li class="current"><a href="#section-1">Section 1</a></li>
 4     <li><a href="#section-2">Section 2</a></li>
 5     <li><a href="#section-3">Section 3</a></li>
 6     <li><a href="#section-4">Section 4</a></li>
 7     <li><a href="#section-5">Section 5</a></li>
 8     <li><a href="index.html" class="external">查看演示一</a></li>
 9 </ul>
10 
11 
12 对应页面楼层
13 <div class="section" id="section-1"></div>
14 <div class="section" id="section-2"></div>
15 <div class="section" id="section-3"></div>
16 <div class="section" id="section-4"></div>
17 <div class="section" id="section-5"></div>
18 
19 
20 
21 css代码为 主要是有fixed属性并且有top值。同时支持开始的时候不是fixed在页面滑动到一定的高度时候nav变为fixed.
22 #nav{left:20px;position:fixed;width:98px;top:0;}
23 
24 高亮显示代码
25 #nav .current a{background:#909090;color:#ededed;}
26 
27 js调用代码
28 
29 //filter代表 例如 楼层有一个是 返回顶部 这个在华东的时候不参与在内的。external这个属性一定是要给 a 的。不能给 a 的父级 ，否则会报错。调用方法的时候，是给楼层调用，不是给页面对应的区域调用。
30 
31 $(document).ready(function(){
32 
33     $(‘#nav‘).onePageNav({
34 
35         filter: ‘:not(.external)‘,
36 
37         scrollThreshold: 0.25
38 
39     });
40 
41 });

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

1 <script type="text/javascript" src="js/jquery.js"></script>
2 
3 <script type="text/javascript" src="js/jquery.scrollTo.js"></script>
4 
5 <script type="text/javascript" src="js/jquery.nav.min.js"></script>

 1 /**
 2  * jQuery.ScrollTo.js.
 3  */
 4 ;
 5 (function(d) { var k = d.scrollTo = function(a, i, e) { d(window).scrollTo(a, i, e) };
 6     k.defaults = { axis: ‘xy‘, duration: parseFloat(d.fn.jquery) >= 1.3 ? 0 : 1 };
 7     k.window = function(a) { return d(window)._scrollable() };
 8     d.fn._scrollable = function() { return this.map(function() { var a = this,
 9                 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 }) };
10     d.fn.scrollTo = function(n, j, b) { if(typeof j == ‘object‘) { b = j;
11             j = 0 } if(typeof b == ‘function‘) b = { onAfter: b }; if(n == ‘max‘) n = 9e9;
12         b = d.extend({}, k.defaults, b);
13         j = j || b.speed || b.duration;
14         b.queue = b.queue && b.axis.length > 1; if(b.queue) j /= 2;
15         b.offset = p(b.offset);
16         b.over = p(b.over); return this._scrollable().each(function() { var q = this,
17                 r = d(q),
18                 f = n,
19                 s, g = {},
20                 u = r.is(‘html,body‘); switch(typeof f) {
21                 case ‘number‘:
22                 case ‘string‘:
23                     if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)) { f = p(f); break } f = d(f, this);
24                 case ‘object‘:
25                     if(f.is || f.style) s = (f = d(f)).offset() } d.each(b.axis.split(‘‘), function(a, i) { var e = i == ‘x‘ ? ‘Left‘ : ‘Top‘,
26                     h = e.toLowerCase(),
27                     c = ‘scroll‘ + e,
28                     l = q[c],
29                     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;
30                         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];
31                     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);
32                     delete g[c] } });
33             t(b.onAfter);
34 
35             function t(a) { r.animate(g, j, b.easing, a && function() { a.call(this, n, b) }) } }).end() };
36     k.max = function(a, i) { var e = i == ‘x‘ ? ‘Width‘ : ‘Height‘,
37             h = ‘scroll‘ + e; if(!d(a).is(‘html,body‘)) return a[h] - d(a)[e.toLowerCase()](); var c = ‘client‘ + e,
38             l = a.ownerDocument.documentElement,
39             m = a.ownerDocument.body; return Math.max(l[h], m[h]) - Math.min(l[c], m[c]) };
40 
41     function p(a) { return typeof a == ‘object‘ ? a : { top: a, left: a } } })(jQuery);

  1 /*
  2  * jQuery.nav.js
  3  
  4  */
  5 ;(function($) {
  6   $.fn.onePageNav = function(options) {
  7     var opts = $.extend({}, $.fn.onePageNav.defaults, options),
  8         onePageNav = {};
  9     
 10     onePageNav.sections = {};
 11     
 12     onePageNav.bindNav = function($el, $this, o) {
 13       var $par = $el.parent(),
 14           newLoc = $el.attr(‘href‘),
 15           $win = $(window);
 16 
 17       if(!$par.hasClass(o.currentClass)) {
 18         if(o.begin) {
 19           o.begin();
 20         }
 21         onePageNav.adjustNav($this, $par, o.currentClass);
 22         $win.unbind(‘.onePageNav‘);
 23         $.scrollTo(newLoc, o.scrollSpeed, {
 24           easing: o.easing,
 25           offset: {
 26             top: -o.scrollOffset
 27           },
 28           onAfter: function() {
 29             if(o.changeHash) {
 30               window.location.hash = newLoc;
 31             }
 32             $win.bind(‘scroll.onePageNav‘, function() {
 33               onePageNav.scrollChange($this, o);
 34             });
 35             if(o.end) {
 36               o.end();
 37             }
 38           }
 39         });
 40       }
 41     };
 42     
 43     onePageNav.adjustNav = function($this, $el, curClass) {
 44       $this.find(‘.‘+curClass).removeClass(curClass);
 45       $el.addClass(curClass);
 46     };
 47     
 48     onePageNav.getPositions = function($this, o) {
 49       var $nav = $this.find(‘a‘);
 50       
 51       if(o.filter !== ‘‘) {
 52         $nav = $nav.filter(o.filter);
 53       }
 54       
 55       $nav.each(function() {
 56         var linkHref = $(this).attr(‘href‘),
 57             divPos = $(linkHref).offset(),
 58             topPos = divPos.top;
 59             
 60         onePageNav.sections[linkHref.substr(1)] = Math.round(topPos) - o.scrollOffset;
 61       });
 62     };
 63     
 64     onePageNav.getSection = function(windowPos, o) {
 65       var returnValue = ‘‘,
 66           windowHeight = Math.round($(window).height() * o.scrollThreshold);
 67       
 68       for(var section in onePageNav.sections) {
 69         if((onePageNav.sections[section] - windowHeight) < windowPos) {
 70           returnValue = section;
 71         }
 72       }
 73       return returnValue;
 74     };
 75     
 76     onePageNav.scrollChange = function($this, o) {
 77       onePageNav.getPositions($this, o);
 78       
 79       var windowTop = $(window).scrollTop(),
 80           position = onePageNav.getSection(windowTop, o);
 81           
 82       if(position !== ‘‘) {
 83         onePageNav.adjustNav($this,$this.find(‘a[href=#‘+position+‘]‘).parent(), o.currentClass);
 84       }
 85     };
 86     
 87     onePageNav.init = function($this, o) {
 88       var didScroll = false,
 89           $nav = $this.find(‘a‘);
 90       
 91       if(o.filter !== ‘‘) {
 92         $nav = $nav.filter(o.filter);
 93       }
 94 
 95       $nav.bind(‘click‘, function(e) {
 96         onePageNav.bindNav($(this), $this, o);
 97         e.preventDefault();
 98       });
 99     
100       onePageNav.getPositions($this, o);
101     
102       $(window).bind(‘scroll.onePageNav‘, function() {
103         didScroll = true;
104       });
105 
106       setInterval(function() {
107         if(didScroll) {
108           didScroll = false;
109           onePageNav.scrollChange($this, o);
110         }
111       }, 250);
112     };
113     
114     return this.each(function() {
115       var $this = $(this),
116           o = $.meta ? $.extend({}, opts, $this.data()) : opts;
117       
118       onePageNav.init($this, o);
119     
120     });
121   };
122 
123   // default options
124   $.fn.onePageNav.defaults = {
125     currentClass: ‘current‘,
126     changeHash: false,
127     easing: ‘swing‘,
128     filter: ‘‘,
129     scrollSpeed: 750,
130     scrollOffset: 0,
131     scrollThreshold: 0.5,
132     begin: false,
133     end: false
134   };
135 
136 })(jQuery);