jQuery - 将元素滚动到屏幕中间，而不是锚点链接顶部 [英] jQuery - Scroll element to the middle of the screen instead of to the top with an anchor link

问题描述

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

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

 < nav class =main-nav> 
< a href =＃top>页首< / a> 
< a href =＃section-1>第1部分< / a> 
< a href =＃section-2>第2部分< / a> 
< a href =＃section-3>第3部分< / a> 
< a href =＃section-4>第4部分< / a> 
< a href =＃section-5>第5节< / a> 
< / nav> 
  

我使用 kswedberg的jQuery Smooth Scroll插件来平滑滚动。我以这样的方式启动它：

  $（'。main-nav a'）。smoothScroll（{
 offset： 0，
速度：700 
}）; 
  

我想将偏移量设置为（（window）.height / 2） - （元素高度/ 2），这样它就垂直居中了，但我需要帮助来弄清楚如何正确执行。

我需要它：

• 获取窗口的高度并将其除以2


• 获取元素的高度并将其除以2


• 从后者减去前者
  
• 如果可能的话，按照默认值将它对齐到顶部if该元素高于窗口
  
  
  

  由于有很多锚链接，我假设我需要检查锚点元素的高度

  
  
  

  有人知道如何做到这一点吗？
  

  解决方案

  API提供了一种执行 smoothScro不会绑定到元素。
  您需要在锚标记的onclick事件中执行此方法，以便您可以访问它的目标。然后你可以计算出你需要达到的位置。由于偏移量现在是一个绝对偏移量而不是相对偏移量，因此您需要获取滚动到的确切位置。

  
  $ b $ （'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; 
  }）; 
    

  
  

  I'm building a one-page site with a fixed-positioned navigation bar which scrolls smoothly to the different section elements through anchor links. The default behaviour for scrolling to an element is to align it to the top of the browser window. Instead, I want to align the element to the middle of the screen.

  I use this markup for navigation:

  <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>
  

  I use kswedberg's jQuery Smooth Scroll plugin to smooth the scrolling. I initiate it like this:

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

  I want to set the offset to be ((window).height / 2) - (element height / 2) so that it's vertically centered, but I need help to figure out how to execute it properly.

  I need it to:

  • Get the height of the window and divide it by two
  • Get the height of the element and divide it by two
  • Subtract the former from the latter
  • If possible, align it to the top as per default if the element is higher than the window

  Since there are many anchor links I assume I either need to check the height of the element the anchor link that was clicked links to, or initiate smoothScroll for every anchor link.

  Does anybody know how to do this?

  解决方案

  The API provides a way to execute a smoothScroll not bound to an element. You'll want to execute this method inside an onclick event for the anchor tags so that you can have access to it's target. Then you can calculate what you need to to get to the desired position. Since offset is now an absolute offset instead of a relative offset, you'll need to get the exact position to scroll to.

  $('.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;
  });
  

  这篇关于jQuery - 将元素滚动到屏幕中间，而不是锚点链接顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！