jQuery Glatte Nach oben scrollen und von ID Anker (mit Offset)

Question

dies zu einer Fragen eine Erweiterung ist, die zuvor hier beantwortet wurde: See Prevoius Question

Ich habe ein bisschen von jQuery, die sowohl eine glatte Spirale Zugabe nach oben Funktion, und ein reibungsloses Scrollen zu jedem Anker auf einer Seite gefunden.

Jetzt muss ich nur einen Offset zum Anker scroll (110px) hinzufügen, um feste Header zu berücksichtigen, OHNE die Scroll-to-Top-Funktion zu verwirren.

Hier ist der vorhandene Code:

// Add To Top Button + Smooth Scroll to Anchors functionality 
jQuery(document).ready(function($){ 
    // Scroll (in pixels) after which the "To Top" link is shown 
    var offset = 700, 
    //Scroll (in pixels) after which the "back to top" link opacity is reduced 
    offset_opacity = 1200, 
    //Duration of the top scrolling animation (in ms) 
    scroll_top_duration = 700, 
    //Get the "To Top" link 
    $back_to_top = $('.to-top'); 

//Visible or not "To Top" link 
$(window).scroll(function(){ 
    ($(this).scrollTop() > offset) ? $back_to_top.addClass('top-is-visible') : $back_to_top.removeClass('top-is-visible top-fade-out'); 
    if($(this).scrollTop() > offset_opacity) { 
     $back_to_top.addClass('top-fade-out'); 
    } 
}); 

//Smooth scroll to top 
$back_to_top.on('click', function(event) { 
    event.preventDefault(); 
    targetedScroll(); 
}); 

// example of smooth scroll to h2#anchor-name 
$('#some-button').on('click', function(event) { 
    event.preventDefault(); 
    targetedScroll('anchor-name'); 
}); 

// bind smooth scroll to any anchor on the page 
$('a[href^="#"]').on('click', function(event) { 
    event.preventDefault(); 
    targetedScroll($(this).attr('href').substr(1)); 
}); 

// scrolling function 
function targetedScroll(id) { 
    // scrollTop is either the top offset of the element whose id is passed, or 0 
    var scrollTop = id ? $('#' + id).offset().top : 0; 

    $('body,html').animate({ 
     scrollTop: scrollTop, 
    }, scroll_top_duration); 
} 

}); 

Answer 1

Jedes Mal your're auf ein Element scrollen, müssen Sie blättern niedriger als das Element durch die Höhe des festen navbar. In ähnlicher Weise benötigt das erste Element auf der Seite einen Rand oder Abstand, der um die Höhe der Navigationsleiste versetzt wird.

Da beide Offsets identisch sind, können Sie den Offset für das Scrollen einstellen, während Sie gleichzeitig den Offset für das erste Element festlegen. Wenn Sie zu einem Element scrollen, subtrahieren Sie den Versatz von der Höhe von oben. Dies funktioniert auch beim Scrollen nach oben.

jQuery(document).ready(function($) { 
    var offset = $("nav").height(); 
    $("body").css("padding-top", offset + "px"); 
    $('a[href^="#"]').click(function(event) { 
     event.preventDefault(); 
     var scrollY = $(this.href).offset().top; 
     $('html, body').animate({ 
      scrollTop: scrollY - offset 
     }, 2000); 
    }); 
});