Jquery scrollTop() with offset issue

Question

I am using jQuery scrollTop() to navigate within a page.

Since I have sticky navigation, I tried offset() so that the element isn't behind the nav but it's not working 100%.

This is my code (adopted from this thread):

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

What's missing?

Update - Here's the code for my sticky menu (it is 60px high) -

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

Can you post your sticky nav html in your example? You will have to calculate the height of your sticky nav and parent so you can scroll to the perfect position. — joshmoto, Oct 18 '20 at 23:45
@joshmoto Thanks, just updated the post with the sticky nav. Just in case, it is 60px in height. My original code referenced 100px offset but that was just an arbitrary number that I used while trying to get it to work. — Gilad, Oct 19 '20 at 00:30

score 0 · Answer 1 · answered Oct 19 '20 at 02:11

Is this the kind of thing you are after?

See comments in script below which walks you through what is happening.

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

Jquery scrollTop() with offset issue

1 Answers1