jQuery - 使用锚链接将元素滚动到屏幕中间而不是顶部

Question

我正在构建一个带有固定位置导航栏的单页网站,该导航栏通过锚链接平滑地滚动到不同的部分元素.滚动到元素的默认行为是将其与浏览器窗口的顶部对齐.相反,我想将元素对齐到屏幕的中间.

我使用这个标记进行导航:

<nav class="main-nav">
  <a href="#top">Top</a>
  <a href="#section-1">Section 1</a>
  <a href="#section-2">Section 2</a>
  <a href="#section-3">Section 3</a>
  <a href="#section-4">Section 4</a>
  <a href="#section-5">Section 5</a>
</nav>

我使用kswedberg的jQuery Smooth Scroll插件来平滑滚动.我这样发起:

$('.main-nav a').smoothScroll({
  offset: 0,
  speed: 700
});

我想将偏移设置为((window).height / 2) - (element height / 2)垂直居中,但我需要帮助来弄清楚如何正确执行它.

我需要它:

• 获取窗口的高度并将其除以2
• 获取元素的高度并将其除以2
• 从后者中减去前者
• 如果可能,如果元素高于窗口,则将其与默认值对齐

由于有许多锚链接,我假设我需要检查单击链接的锚链接的元素高度,或者为每个锚链接启动smoothScroll.

有人知道怎么做这个吗？

Answer 1

API提供了一种执行未绑定到元素的smoothScroll的方法.您将希望在锚点标记的onclick事件中执行此方法,以便您可以访问它的目标.然后,您可以计算出到达所需位置所需的内容.由于offset现在是绝对偏移而不是相对偏移,因此您需要获得滚动到的确切位置.

$('.main-nav a').on('click', function(e) { 
  var el = $( e.target.getAttribute('href') );
  var elOffset = el.offset().top;
  var elHeight = el.height();
  var windowHeight = $(window).height();
  var offset;

  if (elHeight < windowHeight) {
    offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
  }
  else {
    offset = elOffset;
  }

  $.smoothScroll({ speed: 700 }, offset);
  return false;
});

Answer 2

以下是使用scrollTo()使用普通JQuery的方法

 $('.main-nav a').on('click', function(e) { 
  var el = $( e.target.getAttribute('href') );
  var elOffset = el.offset().top;
  var elHeight = el.height();
  var windowHeight = $(window).height();
  var offset;

  if (elHeight < windowHeight) {
    offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
  }
  else {
    offset = elOffset;
  }
  var speed = 700;
  $('html, body').animate({scrollTop:offset}, speed);
});

这是straker的代码和来自这个问题的代码的组合:jQuery scrollTo - 窗口垂直中心Div

Answer 3

这可以使用 vanilla JS 完成scrollIntoView：

document.getElementById('myID').scrollIntoView({
    behavior: 'auto',
    block: 'center',
    inline: 'center'
});