根据给定的URL查询字符串滚动HTML页面。

Question

我不知道如何使HTML页面滚动到URL的特定字符串。

例如：如果用户输入

• http://www.example.com/page.jsp?utc=1234567890

HTML页面包含许多基于用户在URL中提供的UTC值的时间值，页面应该滚动到用户在URL中提供的UTC值。

请问您能否建议如何在HTML、JavaScript等中实现这个功能？

- vrreddy1234

---

请参考以下内容：重复：https://stackoverflow.com/a/63887613/1307020 - Saturnix

Answer 1

尝试下面的代码：

var vars = [],
  hash = '';
var hashes = window.location.href;
var decodedurl = decodeURIComponent(hashes);
var newurl = decodedurl.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < newurl.length; i++) {
  hash = newurl[i].split('=');
  console.log(hash);
  vars[hash[0]] = hash[1];
}

setTimeout(function() {
  if (vars['utc'] !== undefined && vars['utc'] == '1234567890 ') {
    const element = document.getElementById("utc_1234567890");
    element.scrollIntoView({ behavior: 'smooth'});
  }
}, 3000);

在代码中将 utc_1234567890 替换为您要滚动到的 div 元素 id，并将 URL 中的 1234567890 替换为相应的 utc 值

- Roby Raju Oommen

---

感谢您的回复。我的项目不使用jquery，因此我无法尝试您发布的上面的代码片段。我只能使用纯javascript，并且我的项目使用jsp构建html页面。 - vrreddy1234

我已将代码更新为JavaScript。如果它能正常工作，请将答案标记为已接受。 - Roby Raju Oommen

Answer 2

使用 URL searchParams 和 scrollIntoView() 方法。
在 codepen 上的工作示例。
在下面的示例中，如果 URL 包含 ?utc=123，则会滚动到该块：

;(() => {
  const params = ( new URL(location.href) ).searchParams;
  const id = params.get('utc');
  const block = document.getElementById(`utc-${id}`);
  if (block) {
    setTimeout(() => block.scrollIntoView({ behavior: 'smooth' }), 20)
  }
})();

/* for testing */
#utc-123 {
  margin: 100vh 0;
}

<div id="utc-123">utc-123</div>

- imhvost

---

谢谢。我正在使用JSP构建HTML页面，我正在尝试找到如何从我的JSP调用上面的代码片段（即JavaScript代码）。我尝试了window.onload()，但某种原因这个window.onload()没有被调用。如果有任何想法，请分享出来。 - vrreddy1234

只需将此代码添加到页面底部的<script></script>标签中，在闭合的</body>标签之前即可。 - imhvost

Answer 3

基本上，只要锚点链接包含在URL中，您的浏览器就会自动跳转到该锚点链接。例如，当您调用链接时，?utc=7 会自动跳转到DOM中设置锚点的位置。因此，它会跳转到这个位置：<div id="7">Hello World</div>。如果您在spa应用程序中操作URL，当然可能会导致浏览器无法立即跳转到该位置。在这种情况下，您可以通过js location api触发它，或者您可以简单地触发页面重新加载;-)（最简单的方法）。

以下是关于锚点的一般主题的简短示例。

const navLinks = document.querySelectorAll('a');

navLinks.forEach(a => {
  a.addEventListener('click', e =>  {
    const tgt = e.target.getAttribute('href')
    alert("jump to:" + tgt)
  })
});

.page {
  height: 100vh;
}

ul {
  position: fixed;
  background: green;
}

section {
  border-bottom: 3px solid red;
  height: 50%;
  background-color: yellow;
  margin-bottom: 10px;
}

<div class="page">
  <ul>
    <l><a href="#1">1</a></li>
    <l><a href="#2">2</a></li>
    <l><a href="#3">3</a></li>
    <l><a href="#4">4</a></li>
  </ul>
  <section id="1">1</section>
  <section id="2">2</section>
  <section id="3">3</section>
  <section id="4">4</section>
</div>

- Maik Lowrey