时间戳

首页 > 解决方案 > 在同一页面中重用（用户单击）相同的 HTML 锚 (#)

html - 在同一页面中重用（用户单击）相同的 HTML 锚 (#)

问题描述

我不得不在一个名为 Unily 的平台上开发一个 html 页面，它不允许我使用任何 JS 或 CSS（内联除外）。该页面很长，我想为它们使用锚点导航回页面顶部。当您第一次单击顶部时这很好，但是因为如果您向下滚动并再次单击 #top 链接，则 URL 现在是 #TOP，它什么也不做。

有没有什么方法可以在不使用 JS 的情况下让它多次工作？

标签： html

解决方案

您可以使用内联 javascript 来执行此操作。

<html>
  <script type="text/javascript">
  function scrollTo(anchor) {
       location.hash = anchor;
       location.hash = "";
  }
  </script>
  <style>
      div a { display: block; min-height: 1000px; background-color: blue;}
  </style>

  <body>
    <div>
        <a id="loc1">text</a><br>
    </div>

    <a href="" onClick="scrollTo('loc1')">go to Loc 1</a>
  </body>
</html>

上面的代码片段在嵌入时不起作用，但您可以轻松地将其复制到计算机上的 html 文件并在本地浏览器中运行。它可以工作，甚至不会修改 URL，因此您可以避免 URL 中出现丑陋#的 '。

推荐阅读