Question



window.onload = function(){
var navlinks = document.getElementsByClassName('nav-link');

for(let i = 0; i < navlinks.length; i++){
      var link = navlinks[i];
      link.onclick = function(){
      var header = document.getElementById('header');
      var height = header.offsetHeight;
      window.scrollBy(0, -1 * height);
      }
  }
}

我在我的网站上有一个固定的标头，并带有内部链接。单击链接并使用上述方法时，我希望页面按标题的高度向下滚动，但似乎不起作用。它是否有可能先执行滚动然后链接到该部分？我可以使用哪些不涉及整个页面结构的方法？

稍后再编辑：已解决。对于可能看到此问题的其他人，我想出了一种解决方法。问题是页面先滚动然后转到链接，看起来好像什么也没发生。我将锚元素转换为div元素，并使用了element.scrollIntoView（）函数，然后按所需的剩余高度滚动。无论如何，这都不是一个优雅的解决方案，但是它可以工作。用TheCodingTrain的话来说，“我稍后再重构”

Answer 1

使用preventDefault：

for(let i = 0; i < navlinks.length; i++){
  var link = navlinks[i];
  link.onclick = function(e) {
    e.preventDefault();
    var header = document.getElementById('header');
    var height = header.offsetHeight;
    window.scrollBy(0, -1 * height);
  }
}

Javacript window.scrollBy（）函数在内部链接上不起作用吗？

1 个答案: