javascript - 一页 anchor 卷轴。将锚定目标 div 保持在 float 菜单下方？

Question

我拼命地试图将目标 div 保持在 float 菜单栏下方。正确的做法是什么？

$(document).ready(function () {
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        var target = this.hash;
        var t = $(this.hash).offset().top;
        $('.wrapper').animate({
        scrollTop: t,
        }, 800, function () {
            window.location.hash = target;
        });
    });
});

我尝试通过 jquery .addClass 添加填充和边距，但没有取得显着的成功。也尝试重新定位 div。一切都无法正常工作。

这是我为 friend 做的实时测试网站 http://rolfvohs.com/

Answer 1

您可以通过添加负值来调整顶部位置。所以如果你的滚动偏离了 200px，只需调整你的函数即可；

    $(document).ready(function () {
        $('a[href^="#"]').on('click', function (e) {
            e.preventDefault();
            var target = this.hash;
            var t = $(this.hash).offset().top-200;
            $('.wrapper').animate({
            scrollTop: t,
            }, 800, function () {
                window.location.hash = target;
            });
        });
    });

如果没有其余的代码，这是我最好的猜测。我实际上会考虑与你的滚动略有不同的功能。你的滚动功能似乎在 Chrome 中有点跳跃。没有在其他方面进行测试，但也许类似；

    $('a[href^="#"]').click(function(){
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
            || location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name='+this.hash.slice(1) + ']');
                if (target.length){
                    $('html, body').animate({scrollTop: target.offset().top-200}, 800);
                    return false;
            }
        }
    });