HTML+JS滚动位置书签功能如何在已保存位置显示可视化提示框

1. HTML 代码调整 #

在页面中加入提示框、保存按钮和状态提示元素：

<button id="saveButton">保存阅读位置</button>
<span id="saved" style="visibility:hidden;">保存成功</span>
<div id="bookmarkHint">已保存阅读位置</div>
<div class="box"></div>
<!-- 其余页面内容 -->

2. CSS 代码调整 #

新增书签提示框样式，修复原box选择器匹配错误（原CSS用#box对应class为box的元素，修正匹配）：

/* 原box样式修正 */
.box {
  position: absolute;
  background-color: black;
  opacity: 0.5;
  height: 2.5em;
  left: 0%;
  right:0%;
}
/* 新增书签提示样式 */
#bookmarkHint {
  position: absolute;
  left: 20px;
  background: rgba(30, 144, 255, 0.85);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 9999;
  visibility: hidden;
  transform: translateY(-100%);
}

3. JS 代码调整 #

修复原代码已知问题，新增提示框位置动态计算逻辑：

function checkStorageSupport() {
  var test = "test";
  try {
      localStorage.setItem(test, test);
      localStorage.removeItem(test);
      return true;
  } catch(e) {
      return false;
  }
}

function getTotalHeight() {
  return document.body.clientHeight;
}

function getSavedPercent() {
  var percent = storageSupported ? loadFromStorage() : loadFromCookie();
  return (percent == null || percent == "") ? 0 : parseFloat(percent);
}

/******* Save *******/
function saveInStorage() {
  localStorage.setItem("scrollPercent", (document.documentElement.scrollTop / getTotalHeight()));
}

function saveCookie() {
  var expDate = new Date();
  expDate.setDate(expDate.getDate() + 7);
  document.cookie = "scrollPercent=" + (document.documentElement.scrollTop / getTotalHeight())
              + "; expires=" + expDate.toUTCString();         
}

/******* Load *******/
function loadFromStorage() {
  return localStorage.getItem("scrollPercent");
}

function loadFromCookie() {
  return document.cookie.replace(/(?:(?:^|.*;\s*)scrollPercent\s*\=\s*([^;]*).*$)|^.*$/, "$1");
}

/******* Remove *******/
function removeFromStorage() {
  localStorage.removeItem("scrollPercent");
}

function removeCookie() {
  document.cookie = "scrollPercent=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

/******* Handler *******/
var saveButton = document.getElementById("saveButton"),
  saved = document.getElementById("saved"),
  bookmarkHint = document.getElementById("bookmarkHint"),
  percent = getSavedPercent();

saveButton.onclick = function() {
  storageSupported ? saveInStorage() : saveCookie();
  saved.style.visibility = "visible";
  // 计算当前滚动位置，设置提示框位置
  const currentScrollTop = document.documentElement.scrollTop;
  bookmarkHint.style.top = currentScrollTop + "px";
  bookmarkHint.style.visibility = "visible";
  setTimeout(function() {
      saved.style.visibility = "hidden";
      bookmarkHint.style.visibility = "hidden";
  }, 1500);
  percent = getSavedPercent();
};

/******* Logic *******/
var storageSupported = checkStorageSupport(),
  percent = getSavedPercent();

if (percent > 0) {
  if (confirm("Would you like to continue reading where you left off?")) {
      document.documentElement.scrollTop = percent * getTotalHeight();
  }
  storageSupported ? removeFromStorage() : removeCookie();
}

实现说明 #

• 点击保存按钮时，会自动获取当前滚动距离，将提示框定位到保存位置的上方显示
• 提示框z-index设为9999，避免被页面其他元素遮挡，transform: translateY(-100%)属性可让提示框完全展示在保存位置上方，不会被滚动条遮挡
• 修复了原代码中错误的document.getSavedPercent调用、cookie过期时间格式错误、box元素选择器不匹配问题
• 放开了原注释的存储清除逻辑，避免每次页面刷新都重复弹出跳转确认

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