jQuery 平滑滚动到顶部并按 ID 锚定（带偏移）

Question

这是对之前在此处回答的问题的扩展：See Prevoius Question

我有一点 jQuery，它既可以平滑滚动到顶部功能，又可以平滑滚动到页面上的任何锚点。

现在，我只需要为锚滚动添加一个偏移量 (110px) 以解决固定标题，而不会弄乱滚动到顶部的功能。

这是现有的代码：

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

每当您滚动到某个元素时，您必须滚动到比该元素低固定导航栏高度的位置。同样，页面上的第一个元素需要一个边距或内边距来偏移导航栏的高度。

由于这两个偏移量相同，您可以在为第一个元素设置偏移量的同时设置滚动偏移量。当您滚动到一个元素时，从顶部的高度减去偏移量。即使滚动到顶部，这仍然有效。

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