Smooth Scroll Anker jquery

Question

Ich möchte die Navigation mit Anker-URL 'und glatten Blättern erstellen. Aber auf dieser Seite verwende ich einen sticky Header mit einer Höhe von 88px.

Wie kann ich eine glatte Scroll, basierend auf Klasse product-anchor-links-action erstellen?

JSFiddle: https://jsfiddle.net/rx0txmek/2/

Mein aktueller HTML:

<div class="product-page-nav"> 
    <div class="container"> 
    <ol class="product-anchor-links-list"> 
     <li class="product-anchor-links-item"><a href="#productbeschrijving" class="product-anchor-links-action">Nav 1</a></li> 
     <li class="product-anchor-links-item"><a href="#specificaties" class="product-anchor-links-action">Nav 2</a></li> 
     <li class="product-anchor-links-item"><a href="#reviews" class="product-anchor-links-action">Nav 3</a></li> 
    </ol> 
    </div> 
</div> 

jQuery:

$(function() { 
    $('a[href*="#"]:not([href="#"])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html, body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 

Answer 1

Nur die Höhe des klebrigen Header aus dem Wert scrollTop subtrahieren. Wenn kein Sticky vorhanden ist, ist der Wert 0 (Sie können einfach den Wert .height() verwenden, wenn der Sticky immer vorhanden ist).

$('a').click(function(){ 

    var stickyHeight = $('.sticky').length ? $('.sticky').height() : 0 

    $('html, body').animate({ 
     scrollTop: $($(this).attr('href')).offset().top - stickyHeight 
    }, 500); 
    return false; 
}); 

Wenn kein $ ist ('stickyHeader')