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's jQuery Smooth Scroll plugin来平滑滚动。我是这样开始的：

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

我想将偏移设置为((window).height / 2) - (element height / 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 - Center Div in Window Vertically

Answer 3

这是确定的方法

var $window = $(window),
    $element = $('.my-element'),
    elementTop = $element.offset().top,
    elementHeight = $element.height(),
    viewportHeight = $window.height(),
    scrollIt = elementTop - ((viewportHeight - elementHeight) / 2);

    $window.scrollTop(scrollIt);

Answer 4

这是我最终使用的解决方案。如果您有一个可滚动的父容器，其中包含单击时需要居中的所有元素，则效果很好。

随时运行代码段以查看其运行效果！

$('#main-nav a').on('click', function(e) { 
  var el = $(this), parentEl = $('#main-nav');
  
  var elOffset = el.offset().top + parentEl.scrollTop();
  var elHeight = el.height();
  var parentHeight = parentEl.height();
  
  var offset = elOffset - ((parentHeight - elHeight) / 2);
 
  parentEl.animate({scrollTop:offset}, 700);
});

#main-nav {
  height: 200px;
  width: 200px;
  outline: 1px solid red;
  overflow: hidden;
}

#main-nav a {
  height: 50px;
  background: blue;
  display: block;
  margin-bottom: 5px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="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>
  <a href="#section-6">Section 6</a>
  <a href="#section-7">Section 7</a>
  <a href="#section-8">Section 8</a>
  <a href="#section-9">Section 9</a>
  <a href="#section-10">Section 10</a>
</nav>

Answer 5

这可以通过scrollIntoView在香草JS中完成：

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

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

5 个答案: