如何在移动端调整jQuery平滑滚动的偏移量？

这个问题太常见了——粘性导航在桌面和移动端的高度往往不一样，硬写固定偏移量肯定会在小屏幕上出问题。这里有两个实用的解决方案，你可以根据自己的场景选：

方法一：根据屏幕宽度动态切换偏移量 #

适合导航栏高度在不同断点固定的场景，通过检测窗口宽度来切换偏移值：

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash,
            $target = $(target);
        
        // 自定义响应式断点，比如768px，可根据你网站的设计调整
        var isMobile = $(window).width() < 768;
        // 给移动端和桌面端设置不同的偏移量
        var offsetTop = $target.offset().top - (isMobile ? 80 : 140);

        $('html, body').stop().animate({
            'scrollTop': offsetTop
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

提示：你可以把80改成移动端导航的实际高度，断点768px也可以换成你项目里用的数值，比如640px。

方法二：动态获取导航栏实际高度（更推荐） #

直接拿粘性导航的实时高度当偏移量，不管设备怎么变都能精准适配，彻底告别硬写数值的麻烦：

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash,
            $target = $(target),
            // 替换成你网站中粘性导航的选择器（类名/ID都可以）
            navHeight = $('.your-sticky-nav').outerHeight();

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top - navHeight
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

小细节：outerHeight()会包含导航的内边距和边框，如果导航有外边距，用outerHeight(true)就能把外边距也算进去，偏移会更准确。

额外优化（可选） #

如果你的导航滚动时会变高度（比如移动端滚动后导航缩小），可以加个窗口 resize 监听，实时更新导航高度：

let navHeight = $('.your-sticky-nav').outerHeight();
// 窗口尺寸变化时重新获取导航高度
$(window).resize(function() {
    navHeight = $('.your-sticky-nav').outerHeight();
});

内容的提问来源于stack exchange，提问作者BIank