javascript - jQuery 滚动和 anchor 初始位置

Question

我正在使用这个 jQuery 代码来实现平滑滚动:

$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 110)
        }, 1000, 'easeInOutExpo');
        event.preventDefault();
    });
});

我添加了 -110 偏移量以正确调整初始位置并且它工作正常，但每次我尝试从外部链接访问 anchor 时，页面加载时都会使用不同的偏移量值。请查看http://www.iscreatividad.com/clientes/msl/servicios.html#serv-planificacion以便清楚地了解问题所在。如果您单击第一个图标，它会自动调整，您会看到它应该加载的方式。

在此先感谢您对此事的任何帮助。

Answer 1

您是在点击 anchor 而不是加载时应用自定义滚动事件，因此当您使用 id 加载页面时，它会跳转到 id，这是默认行为。

$(document).ready(function () {

    var hash = window.location.hash;
    scrollToElem(hash);

    $('a.page-scroll').on('click', function (event) {
        var $anchor = $(this);
        var href = $anchor.attr('href');
        scrollToElem(href);
        event.preventDefault();
    });
});

var scrollToElem = function (hash) {
    var target = hash;
    $('html, body').stop().animate({
        scrollTop: ($(hash).offset().top - 110)
    }, 1000, 'easeInOutExpo');
};