Javascript 滚动查看元素上方的20px？

假设我有以下函数：

window.smoothScroll = function(target) {
  var scrollContainer = target;
  scrollContainer.scrollIntoView(true);
}

如何使页面在元素上方滚动20px，而不是滚动到元素本身

---

谢谢

获取元素的尺寸信息，然后告诉窗口滚动到元素的

顶部

减去20:

function scrollToJustAbove(element, margin=20) {
  let dims = element.getBoundingClientRect();
  window.scrollTo(window.scrollX, dims.top - margin);
}

---

获取元素的尺寸信息，然后告诉窗口滚动到元素的

顶部

减去20，而不是滚动到视图中：

function scrollToJustAbove(element, margin=20) {
  let dims = element.getBoundingClientRect();
  window.scrollTo(window.scrollX, dims.top - margin);
}

---

好的，对于平滑滚动，您可以使用jQuery

animate（）

。检查以下代码：

window.smoothScroll = function(target, above, speed) {
  let $scrollContainer = $target;
  jQuery('html, body').animate({
    scrollTop: jQuery(scrollContainer).offset().top - above
  }, speed);
}

[注意：

over

将是您的20（因为您希望比目标高出20px），

speed

将是任何数字，比如说：900。]

---

如果有帮助的话

好的，要实现平滑滚动，可以使用jQuery

animate（）

。检查以下代码：

window.smoothScroll = function(target, above, speed) {
  let $scrollContainer = $target;
  jQuery('html, body').animate({
    scrollTop: jQuery(scrollContainer).offset().top - above
  }, speed);
}

[注意：

over

将是您的20（因为您希望比目标高出20px），

speed

将是任何数字，比如说：900。]

---

如果有帮助的话

请更改变量定义。 $scrollContainer和目标变量不一样，您可以在下面使用

window.smoothScroll = function(target, above, speed) {
    let scrollContainer = target;
    $('html, body').animate({
        scrollTop: jQuery(scrollContainer).offset().top - above
    }, speed);}

---

请更改变量定义。 $scrollContainer和目标变量不一样，您可以在下面使用

window.smoothScroll = function(target, above, speed) {
    let scrollContainer = target;
    $('html, body').animate({
        scrollTop: jQuery(scrollContainer).offset().top - above
    }, speed);}

---

谢谢你，这似乎有效。但我没有使用getBoundingClientRect（），而是使用了.offsetTop，它似乎工作得很好。它似乎工作得很好，但offsetX/Y属性是相对值，相对于父对象的边界进行测量。如果您的意图是基于元素实际所在的位置进行可靠的滚动，那么不要进行更改，并坚持使用

getBoundingClientRect

=）这里有一个更全面的答案/演示，谢谢，这似乎是可行的。但我没有使用getBoundingClientRect（），而是使用了.offsetTop，它似乎工作得很好。它似乎工作得很好，但offsetX/Y属性是相对值，相对于父对象的边界进行测量。如果您的意图是基于元素实际所在的位置进行滚动，那么不要进行更改，并坚持使用

getBoundingClientRect

=）此时会有一个更全面的答案/演示