在單頁設計中突出顯示導航欄中的當前部分

Question

這有效，但是當我按下鏈接時，滾動速度非常慢。 是什么原因造成的？ 我該怎么做才能使滾動速度更快？ 我可以看到有人問了幾次這個問題，但所有答案都是jquery。沒有jquery可以嗎？ 非常感謝提前

 (function () { 'use strict'; var SectionScroller = { anchorTops: [], el: { anchors: document.querySelectorAll('.anchor'), anchorLinks: document.querySelectorAll('.anchor-link') }, forEach: function(array, callback, scope) { for (var i = 0, ii = array.length; i < ii; i++) { callback.call(scope, i, array[i]); } }, throttle: function (fn, threshhold, scope) { threshhold = threshhold || (threshhold = 250); var last; var deferTimer; return function () { var context = scope || this; var now = +new Date(); var args = arguments; if (last && now < last + threshhold) { // hold on to it clearTimeout(deferTimer); deferTimer = setTimeout(function () { last = now; fn.apply(context, args); }, threshhold); } else { last = now; fn.apply(context, args); } }; }, mathSign: function (x) { x = +x; // convert to a number if (x === 0 || isNaN(x)) { return x; } return x > 0? 1: -1; }, anchorGetter: function () { var SS = SectionScroller; for (var i = 0, max = SS.el.anchors.length; i < max; i++) { SS.anchorTops[i] = SS.el.anchors[i].offsetTop; } for (var j = 0, jj = SS.anchorTops.length; j < jj; j++) { if (SS.anchorTops[j] - 1 < window.scrollY) { for (var x = 0, xx = SS.el.anchors.length; x < xx; x++) { SS.el.anchorLinks[x].classList.remove('selected'); } SS.el.anchorLinks[j].classList.add('selected'); } } }, smooth: function (e) { var id = e.currentTarget.getAttribute('href'); var node = document.querySelector(id); var nodeTop = node.offsetTop; var winTop = window.scrollY; var sign = SectionScroller.mathSign(nodeTop); var scrollAmnt; var down; if (nodeTop > winTop) { down = true; scrollAmnt = nodeTop - winTop; } else { down = false; scrollAmnt = Math.abs(winTop - nodeTop); } var scroller = function () { if (down) { window.scrollTo(0, window.scrollY + 1); } else { window.scrollTo(0, window.scrollY - 1); } scrollAmnt--; if (scrollAmnt > 0) { window.requestAnimationFrame(scroller); } }; window.requestAnimationFrame(scroller); e.preventDefault(); }, smoothScroll: function(e) { var id = e.currentTarget.getAttribute('href'); var node = document.querySelector(id); var scrollContainer = node; do { //find scroll container scrollContainer = scrollContainer.parentNode; if (;scrollContainer) return. scrollContainer;scrollTop += 1. } while (scrollContainer;scrollTop === 0); var targetY = 0; do { //find the top of target relatively to the container if (node == scrollContainer) break. targetY += node;offsetTop. } while (node === node;offsetParent), var scroll = function(c, a, b; i) { i++; if (i > 30) return. c;scrollTop = a + (b - a) / 30 * i, setTimeout(function(){ scroll(c, a, b; i), }; 20); }, // start scrolling scroll(scrollContainer. scrollContainer,scrollTop, targetY; 0). e;preventDefault(), }: events; function () { var SS = SectionScroller. window,addEventListener('scroll'. SS.throttle(SS,anchorGetter; 150)). SS.forEach(SS.el,anchorLinks, function (index. link) { link,addEventListener('click'. SS;smooth); }), }: init. function () { SectionScroller;anchorGetter(). SectionScroller;events(); } }. SectionScroller;init(); })();

 * { box-sizing: border-box; } section { display: block; height: 100vh; max-width: 100%; width: 100vw; }.selected { color: red; } nav { position: fixed; right: 1em; top: 1em; }.anchor-link { display: block; margin-bottom: 1em; text-underline: none; }

 <nav> <a href="#anchor-1" class="anchor-link">Chapter 1</a> <a href="#anchor-2" class="anchor-link">Chapter 2</a> <a href="#anchor-3" class="anchor-link">Chapter 3</a> <a href="#anchor-4" class="anchor-link">Chapter 4</a> <a href="#anchor-5" class="anchor-link">Chapter 5</a> </nav> <section class="section"> <a href="#" id="anchor-1" class="anchor">Chapter 1</a> </section> <section class="section"> <a href="#" id="anchor-2" class="anchor">Chapter 2</a> </section> <section class="section"> <a href="#" id="anchor-3" class="anchor">Chapter 3</a> </section> <section class="section"> <a href="#" id="anchor-4" class="anchor">Chapter 4</a> </section> <section class="section"> <a href="#" id="anchor-5" class="anchor">Chapter 5</a> </section>

這有效，但是當我按下鏈接時，滾動速度非常慢。 是什么原因造成的？ 我該怎么做才能使滾動速度更快？ 我可以看到有人問了幾次這個問題，但所有答案都是jquery。沒有jquery可以嗎？ 提前致謝 這有效，但是當我按下鏈接時，滾動速度非常慢。 是什么原因造成的？ 我該怎么做才能使滾動速度更快？ 我可以看到有人問了幾次這個問題，但所有答案都是jquery。沒有jquery可以嗎？ 提前致謝 這有效，但是當我按下鏈接時，滾動速度非常慢。 是什么原因造成的？ 我該怎么做才能使滾動速度更快？ 我可以看到有人問了幾次這個問題，但所有答案都是jquery。沒有jquery可以嗎？ 非常感謝提前

Answer 1

所以我找到了解決我的問題的方法。

(function() {
  'use strict';
  var SectionScroller = {
    anchorTops: [],

    el: {
      anchors: document.querySelectorAll('.anchor'),
      anchorLinks: document.querySelectorAll('.anchor-link')
    },

    forEach: function(array, callback, scope) {
      for (var i = 0, ii = array.length; i < ii; i++) {
        callback.call(scope, i, array[i]);
      }
    },

    throttle: function(fn, threshhold, scope) {
      threshhold = threshhold || (threshhold = 250);
      var last;
      var deferTimer;
      return function() {
        var context = scope || this;
        var now = +new Date();
        var args = arguments;
        if (last && now < last + threshhold) {
          // hold on to it
          clearTimeout(deferTimer);
          deferTimer = setTimeout(function() {
            last = now;
            fn.apply(context, args);
          }, threshhold);
        } else {
          last = now;
          fn.apply(context, args);
        }
      };
    },

    anchorGetter: function() {
      var SS = SectionScroller;
      for (var i = 0, max = SS.el.anchors.length; i < max; i++) {
        SS.anchorTops[i] = SS.el.anchors[i].offsetTop;
      }
      for (var j = 0, jj = SS.anchorTops.length; j < jj; j++) {
        if (SS.anchorTops[j] - 1 < window.scrollY) {
          for (var x = 0, xx = SS.el.anchors.length; x < xx; x++) {
            SS.el.anchorLinks[x].classList.remove('selected');
          }
          SS.el.anchorLinks[j].classList.add('selected');
        }
      }
    },


    smooth: function(e) {
      var id = e.currentTarget.getAttribute('link');
      document.getElementById(id).scrollIntoView({
        behavior: 'smooth'
      });
    },

    events: function() {
      var SS = SectionScroller;
      window.addEventListener('scroll', SS.throttle(SS.anchorGetter, 150));
      SS.forEach(SS.el.anchorLinks, function(index, link) {
        link.addEventListener('click', SS.smooth);
      });
    },

    init: function() {
      SectionScroller.anchorGetter();
      SectionScroller.events();
    }
  };

  SectionScroller.init();
})();