Question

我正在创建一个网页，并且有兴趣让我的页面滚动到特定位置+一定数量的像素。我在网上找到了许多平滑滚动的例子，但我似乎无法弄清楚如何设置它，比如说，目标正好在目标上方45个像素。

我目前使用的JavasSript文件中的代码如下所示：

$(document).ready(function () {
    $(document).on("scroll", onScroll);

    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");

        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');

        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate(
        {'scrollTop': $target.offset().top}
        , 1200, 'swing', function () 
        {window.location.hash = target;
        $(document).on("scroll", onScroll);}
        );
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('.navigation a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top-170<= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('.navigation ul li a').removeClass("active");
            currLink.addClass("active");
        }
    });
}

通过将.offset().top-45添加到行{'scrollTop': $target.offset().top-45}，我已经能够让自己到了一半，并且它在Chrome上完美运行;但是对于其他所有主要的浏览器，它会滚动到完美的位置（目标上方45个像素），然后＆＃34;快照＆＃34;回到初始位置（比我想要的低）。

我还尝试将.offset().top-45添加到行{'scrollTop': {window.location.hash = target.offset().top-45}，该行在Chrome上完美运行。它实际上也适用于IE，虽然仅用于第一次选择 - 之后它变得没有响应。

我尝试这样做的原因是因为我在页面顶部有一个45像素高的浮动导航栏，所以我希望页面滚动到正确的位置+ 45像素，以避免导航栏隐藏任何内容。

JavaScript滚动到位置ABOVE指定的DIV，即45像素以上

0 个答案: