时间戳

首页 > 解决方案 > 带有偏移问题的 Jquery scrollTop()

javascript - 带有偏移问题的 Jquery scrollTop()

问题描述

我正在使用 jQuery scrollTop() 在页面内导航。

因为我有粘性导航，所以我尝试了 offset() 以便元素不在导航后面，但它不能 100% 工作。

这是我的代码（从这个线程采用）：

<a href="#personal-history" class="sliding-link">Personal History</a>

$(".sliding-link").click(function(e) {
    e.preventDefault();
    var aid = $(this).attr("href");
    $('html,body').animate({scrollTop: $(aid).offset().top - 100},'slow');
});

少了什么东西？

更新- 这是我的粘性菜单的代码（它是 60 像素高） -

<nav id="sticky-navigation" class="has-sticky-branding" itemtype="https://schema.org/SiteNavigationElement" itemscope="" style="z-index: 100; display: block; margin-top: 32px; position: fixed; top: 0px; width: 731px;">
  <div class="inside-navigation">
    <div class="navigation-branding">
      <div class="sticky-navigation-logo">
    <a href="#"><img src="#"></a>
      </div>
    </div>              
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><span class="mobile-menu">Menu</span></button>
    <div id="primary-menu" class="main-nav">
      <ul id="menu-main" class=" menu sf-menu">
        <li id="menu-item-32" class="home menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-2 current_page_item menu-item-32"><a href="#" aria-current="page" class="sliding-link">Home</a></li >
      </ul>
    </div>          
  </div>
</nav>

标签： javascripthtmljquery

解决方案

这是你所追求的吗？

请参阅下面脚本中的注释，它会引导您了解正在发生的事情。

// on ready
$(function() {

  // on any sliding-link class
  $(document).on('click', '.sliding-link', function(e) {

    // get current nav height
    let navHeight = $('#sticky-navigation').outerHeight();

    // get the href id from the clicked menu item
    let section_id = $(this).attr('href');

    // get the scroll to (top) position minus the nav
    let scrollTo = $(section_id).offset().top - navHeight;

    // scroll to
    $('html,body').animate({
      scrollTop: scrollTo
    }, 1000);

    // prevent link defaults
    e.preventDefault();

  });

});
BODY {
  padding: 0;
  margin: 0;
}

#sticky-navigation {
  background: #fff;
  position: sticky;
  top: 0;
}

.inside-navigation {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
}

SECTION {
  height: 300px;
}

#home {
  background: #ff0000;
}

#about {
  background: #ff7700;
}

#news {
  background: #fff100;
}

#products {
  background: #00bd2f;
}

#faq {
  background: #0054ac;
}

#contact {
  background: #af0193;
}
<nav id="sticky-navigation" class="has-sticky-branding">
  <div class="inside-navigation">
    <div class="navigation-branding">
      <div class="sticky-navigation-logo">
        <a href="#"><img src="#"></a>
      </div>
    </div>
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
      <span class="mobile-menu">Menu</span>
    </button>
    <div id="primary-menu" class="main-nav">
      <ul id="menu-main" class=" menu sf-menu">
        <li class="menu-item">
          <a href="#home" class="sliding-link">Home</a>
        </li>
        <li class="menu-item">
          <a href="#about" class="sliding-link">About</a>
        </li>
        <li class="menu-item">
          <a href="#news" class="sliding-link">News</a>
        </li>
        <li class="menu-item">
          <a href="#products" class="sliding-link">Products</a>
        </li>
        <li class="menu-item">
          <a href="#faq" class="sliding-link">FAQ</a>
        </li>
        <li class="menu-item">
          <a href="#contact" class="sliding-link">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<section id="home">
  Home
</section>

<section id="about">
  About
</section>

<section id="news">
  News
</section>

<section id="products">
  Products
</section>

<section id="faq">
  FAQ
</section>

<section id="contact">
  Contact
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐阅读