如何实现页面刷新后不定位到之前的滚动位置？

当我们在网页上进行滚动操作时，在页面刷新之后，通常会回到之前滚动的位置。这可能会导致用户体验不佳，尤其是当网页很长时。

原理

页面刷新时，浏览器会将所有的页面元素重新加载，并恢复之前滚动的位置。要实现不定位到之前的滚动位置，需要在页面刷新之前记录当前滚动位置，并在页面加载完成后将滚动位置重置为顶部。

实现方法

以下是一些实现方法：

使用JavaScript

可以使用JavaScript编写一个函数来保存当前滚动位置，并在页面加载完成后将滚动位置重置为顶部。例如：

function refreshPage() {
  sessionStorage.setItem('scrollTop', window.scrollY);
  window.location.reload();
}

window.onload = function() {
  var scrollTop = sessionStorage.getItem('scrollTop');
  if (scrollTop !== null) {
    window.scrollTo(0, scrollTop);
    sessionStorage.removeItem('scrollTop');
  }
}

在这个例子中，我们定义了一个名为refreshPage()的函数，它首先使用sessionStorage保存当前滚动位置，然后使用location.reload()重新加载页面。当页面加载完成后，我们使用window.onload事件和sessionStorage获取之前保存的滚动位置，并使用scrollTo()方法将滚动位置重置为顶部。最后，我们还需要删除sessionStorage中的scrollTop值。

使用HTML5的history API

另一种方法是使用HTML5的history API，它允许我们在页面刷新时更新浏览器历史记录。例如：

window.onbeforeunload = function() {
  history.replaceState({scrollY: window.scrollY}, '');
}

window.onload = function() {
  var state = history.state || {};
  if (state.scrollY !== undefined) {
    window.scrollTo(0, state.scrollY);
  }
}

在这个例子中，我们定义了一个名为onbeforeunload的事件处理函数，在页面即将被卸载时，使用replaceState()方法将当前滚动位置保存到浏览器历史记录中。当页面加载完成后，我们使用history.state获取保存的状态，并使用scrollTo()方法将滚动位置重置为之前的位置。

使用CSS

还可以使用CSS来实现不定位到之前的滚动位置。具体来说，可以在标签上添加样式“scroll-behavior: smooth;”来实现平滑滚动效果，并将滚动位置重置为顶部。例如：

html {
  scroll-behavior: smooth;
}

html, body {
  height: 100%;
  overflow: auto;
}

body {
  margin: 0;
  padding: 0;
}

body:before {
  content: "";
  display: block;
  height: 1px;
  margin: -1px 0 0;
}

body[id]:before {
  content: "";
  display: block;
  height: 100%;
  margin-top: -50vh;
}

body[id]:after {
  content: "";
  display: block;
  height: 1px;
  margin: -1px 0 0;
}

html[id]:before {
  content: "";
  display: block;
  height: 1px;
  margin: -1px 0 0;
}

html[id]:after {
  content: "";
  display: block;
  height: 100%;
  margin-top: -50vh;
}

在这个例子中，我们给标签添加了一个scroll-behavior样式，并为和添加了额外的样式来避免滚动位置出现问题。