jQuery滚动&锚点初始位置

时间:2015-02-25 03:04:07

标签: javascript jquery html css smooth-scrolling

我使用这个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偏移量来正确调整初始位置并且它工作正常,但每次我尝试从外部链接访问锚点时,页面都会加载不同的偏移值。请查看http://www.iscreatividad.com/clientes/msl/servicios.html#serv-planificacion以查看问题的清晰视图。如果您点击第一个图标,它会自动调整,您将看到它应该加载的方式。

提前感谢您对此事的任何帮助。

1 个答案:

答案 0 :(得分:0)

您正在点击锚点而不是加载时应用自定义滚动事件,因此当您使用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');
};