ScrollIntoView元素上方20px？

Question

假设我具有以下功能：

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

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

谢谢

Answer 1

获取元素的尺寸信息，然后将其滚动到元素的top减20：而不是将其滚动到视图中，

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

Answer 2

为使滚动流畅，您可以使用jQuery animate()。检查以下代码：

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

[注意：above将是您的20（因为您希望比目标高20px），speed将是任何数字，例如：900。]

如果有帮助...！

Answer 3

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

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