如何解决点击事件中固定定位背景跳转到页面顶部的问题？

我完全懂你遇到的糟心情况——每次触发点击打开lightbox，给body加上.no-scroll类后页面就跳到顶部，明明其他功能都正常，就这一点破坏体验。这个问题的根源在于：当你给body设置overflow: hidden时，浏览器会默认重置页面的滚动位置，再加上你依赖fixed定位来阻止滚动，就更容易触发这个跳顶行为。

下面给你一个完美适配的解决方案，既能保留position: fixed阻止移动端背景滚动的核心需求，又能彻底解决页面跳顶的问题：

1. 修改JavaScript代码，保存并恢复滚动位置 #

我们需要在添加禁止滚动类之前，先记录当前页面的滚动距离，通过动态设置body的top值来抵消fixed定位带来的位置偏移，关闭lightbox时再把滚动位置还原：

$('.pic > img').click(function() {
    var srcToCopy = $(this).attr('src');
    $('body').find('.imgsrc').attr('src', srcToCopy);
    
    // 保存当前滚动位置，给body设置偏移量抵消fixed的位置重置
    var scrollTop = $(window).scrollTop();
    $('body').css('top', -scrollTop + 'px').addClass('no-scroll');
    
    $('#view').addClass("target");
});

$('#customlightbox-controls').on('click', function() {
    // 读取之前保存的滚动位置，恢复页面状态
    var scrollTop = parseInt($('body').css('top')) * -1;
    $('body').removeClass('no-scroll').css('top', '');
    
    $('#view').removeClass("target");
    $(window).scrollTop(scrollTop);
});

2. 更新CSS样式，配合滚动位置的保存逻辑 #

调整.no-scroll的CSS规则，让body使用fixed定位并锁定宽高，确保动态设置的top值能生效：

body.no-scroll {
    overflow: hidden;
    height: 100vh;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0; /* 这个值会被JS动态覆盖为当前滚动偏移的负值 */
}

方案为什么能解决问题？ #

• 通过$(window).scrollTop()记录用户当前的浏览位置，给body设置负的top值，直接抵消了fixed定位带来的页面重置，从根源上避免跳顶。
• 关闭lightbox时，我们把保存的滚动位置还原，让页面回到用户之前停留的地方，完全不打断浏览节奏。
• 保留了position: fixed的特性，完美解决了你用position: absolute无法阻止移动端背景滚动的问题。

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