Question

我正在尝试在我的网站上实施this代码：

由于它是使用页面构建器制作的WordPress站点，因此我不得不使用jquery添加所有锚标记，如下所示：

$('<a name="#A1"></a>').insertBefore('#header');
$('<a name="#A2">Tag #2.</a>').insertBefore('#services');
$('<a name="#A3">Tag #3.</a>').insertBefore('#portfolio');
$('<a name="#A4">Tag #4.</a>').insertBefore('#clients');

代码有效，但是当我尝试滚动时，页面上没有任何反应。我使用了您可以在codepen

中看到的代码

JS：

(function() {
  var delay = false;
  $(document).on('mousewheel DOMMouseScroll', function(event) {
    event.preventDefault();
    if(delay) return;

    delay = true;
    setTimeout(function(){delay = false},200)

    var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

    var a= document.getElementsByTagName('a');
    if(wd < 0) {
      for(var i = 0 ; i < a.length ; i++) {
        var t = a[i].getClientRects()[0].top;
        if(t >= 40) break;
      }
    }
    else {
      for(var i = a.length-1 ; i >= 0 ; i--) {
        var t = a[i].getClientRects()[0].top;
        if(t < -20) break;
      }
    }
    $('html,body').animate({
      scrollTop: a[i].offsetTop
    });
  });
})();

如何让jquery工作？

我检查了网站，每次尝试滚动时都会看到此错误重复。

Here是我试图测试的网站。

Answer 1

这行代码抛出了错误 -

var t = a[i].getClientRects()[0].top;

因为[i]为

   <a href="#" class="zn-res-trigger zn-menuBurger zn-menuBurger--3--s zn-
        menuBurger--anim1" id="zn-res-trigger">
            <span></span>
            <span></span>
            <span></span>
        </a>

没有getClientRects（）方法。

所以用

替换你的代码

for(var i = 0 ; i < a.length ; i++) {
    if(!a[i].className.includes('zn-res-trigger')) //add this check{
     var t = a[i].getClientRects()[0].top;
    ...........
    }
}

同时在调试器的帮助下检查，可能还有其他未使用的锚标签，因此您还必须检查它们

Answer 2

您有一些a元素没有top属性导致未定义的错误。

尝试下面的代码，我会检查a[i].getClientRects().length以获得最高价值：

(function() {
  var delay = false;
  $(document).on('mousewheel DOMMouseScroll', function(event) {
    event.preventDefault();
    if(delay) return;

    delay = true;
    setTimeout(function(){delay = false},200)

    var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

    var a= document.getElementsByTagName('a');
    var scroll = false;
    if(wd < 0) {
      for(var i = 0 ; i < a.length ; i++) {
        if(a[i].getClientRects().length>0) {
           scroll = true;
           var t = a[i].getClientRects()[0].top;
           if(t >= 40) break;
        } 
      }
    }
    else {
      for(var i = a.length-1 ; i >= 0 ; i--) {
        if(a[i].getClientRects().length>0) {
           scroll = true;
           var t = a[i].getClientRects()[0].top;
           if(t < -20) break;
        }
      }
    }

    if(scroll){
      $('html,body').animate({
        scrollTop: a[i].offsetTop
      });
    }
  });
})();

如何使锚标记适用于滚动

2 个答案: