如何用JS/jQuery实现页面提交刷新后回到用户精确浏览位置

方案1：存储滚动高度实现刷新后精准定位 #

该方案就是你提到的思路，通过本地临时存储记录提交前的滚动位置，页面加载完成后自动滚动到对应位置，实现代码如下：

原生JS实现 #

// 监听所有表单提交事件，提交前存储滚动高度
document.querySelectorAll('form').forEach(form => {
  form.addEventListener('submit', () => {
    sessionStorage.setItem('savedScrollY', window.scrollY.toString())
  })
})

// 等页面所有资源（含图片、评论内容）加载完成后执行滚动
window.addEventListener('load', () => {
  const savedPos = sessionStorage.getItem('savedScrollY')
  if (savedPos) {
    window.scrollTo(0, parseInt(savedPos))
    // 用完即删，避免下次打开页面误触发滚动
    sessionStorage.removeItem('savedScrollY')
  }
})

jQuery实现 #

// 提交前存储滚动高度
$('form').on('submit', function() {
  sessionStorage.setItem('savedScrollY', $(window).scrollTop())
})

// 页面全资源加载完成后滚动
$(window).on('load', function() {
  const savedPos = sessionStorage.getItem('savedScrollY')
  if (savedPos) {
    $(window).scrollTop(parseInt(savedPos))
    sessionStorage.removeItem('savedScrollY')
  }
})

注意：这里用window.load而非DOM就绪事件，是因为你的卡片包含不同尺寸的图片，DOM加载完成时图片可能还未渲染，页面整体高度不稳定，会导致滚动偏移，等所有资源加载完成后再滚动即可完全匹配之前的浏览位置。

方案2：无刷新AJAX提交（更推荐） #

不需要刷新页面，自然不存在滚动位置丢失的问题，用户体验更好，实现代码如下：

原生JS实现 #

document.querySelectorAll('form').forEach(form => {
  form.addEventListener('submit', async (e) => {
    // 阻止表单默认提交刷新行为
    e.preventDefault()
    const formData = new FormData(form)
    const submitBtn = form.querySelector('button')

    try {
      const res = await fetch(form.action || window.location.href, {
        method: 'POST',
        body: formData
      })
      if (res.ok) {
        // 提交成功后自定义交互，比如修改按钮状态
        submitBtn.textContent = '已点赞'
        submitBtn.disabled = true
      }
    } catch (err) {
      console.error('提交失败', err)
    }
  })
})

jQuery实现 #

$('form').on('submit', function(e) {
  e.preventDefault()
  const $form = $(this)
  const $btn = $form.find('button')

  $.post($form.attr('action') || window.location.href, $form.serialize(), function() {
    $btn.text('已点赞').prop('disabled', true)
  }).fail(function() {
    alert('提交失败，请重试')
  })
})

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