jQuery修改body滚动位置：弹出遮罩层关闭后scrollTop为0如何解决

问题根因 #

当你给body设置position: fixed之后，页面原生滚动条会失效，此时$(window).scrollTop()获取到的值永远是0。你当前的代码是在每次点击.card的第一行就获取scrollTop，关闭遮罩的那次点击触发时，body还处于fixed状态，所以拿到的position自然是0，无法正确恢复位置。

解决方案 #

1. 打开遮罩、获取到正确的滚动偏移量时，就把这个值持久存储下来（可以定义全局变量存储，也可以存在body的自定义属性中）
2. 关闭遮罩时不要重新获取scrollTop，直接读取之前存储的正确值恢复滚动位置
3. 修复jQuery scrollTop方法的调用错误，该方法仅接收一个数值参数，不需要传入两个参数

修复后代码 #

$(document).ready(function() {
  cardInit();
});

function cardInit() {
  // 全局存储滚动位置
  let savedScrollPos = 0;
  $('.card').on('click', function(event) {
    if ($(event.target).hasClass('show') || $(event.target).hasClass('new-window')) {
      $('.card').removeClass('show');
      $('body').css({
        position: 'static',
        top: '0px'
      // 直接读取存储的滚动位置恢复
      }).scrollTop(savedScrollPos);
    } else {
      // 仅在打开遮罩时获取真实滚动位置并存储
      savedScrollPos = $(window).scrollTop();
      $(this).addClass('show');
      $('body').css({
        position: 'fixed',
        top: -1 * savedScrollPos + 'px'
      });
    };
  });
}

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