javascript - 如何在动画 JavaScript anchor 滚动时编辑 URL 名称？

Question

我最初构建这个收藏页面 (www.michaelhigginson.com) 时没有使用任何 JavaScript。 我已经添加了一些 JavaScript 来动画我的 anchor 标签的滚动。

我的问题是，当我按下任何特定的 anchor 链接时，#anchor_name 不再出现在 URL 栏中。我还希望能够发送一个链接，例如 www.michaelhigginson.com/#print 并加载页面，然后滚动到页面上的那个点。如果有人手动滚动，也许有一种方法可以在到达该 anchor 时更改#anchor_name。

我希望这是有道理的。我才 8 天前才开始学习 HTML、CSS 和 JavaScript，所以我对 JavaScript 的理解还很基础。

这是我目前所拥有内容的简化版本。 http://jsfiddle.net/rVHz7/

HTML

    <div id="content" >
    <a class="anchor" id="about" name="about"><h2>about</h2></a>
    <p>scroll down for button</p>
    </div>

    <footer>
      <ul>  
        <li><a id="abouta" href="#about">about<span class="vline">&#124;</span></a></li>
      </ul>
     </footer>

CSS

    #content {
       width:455px;
       margin:0px auto 1000px auto;
       font-family: Tahoma, Geneva, sans-serif;
       font-size:14px;
       color:#333;
       }

     h2 {
       text-transform:uppercase;
       font-weight:normal;
       font-size:15px;
       padding-top:275px;
       margin:0;
       }

     p {
       padding:0 0 1000px 0;
       } 

JavaScript

    $(function () {
        $("#abouta").on("click", function () {
            $("html, body").animate({
                scrollTop: $("#about").offset().top
            }, 1200);
            return false;
        });
    });

谢谢。

Answer 1

anchor 散列不再出现在 URL 中，因为您在点击时返回 false，这会阻止它进一步执行任何操作。如果你删除 return false 它会修复它，但它也可能在滚动之前有点卡顿，因为浏览器想要采取 native 操作。我会推荐 this answer 中的最后一个解决方案。来解决这个问题。

就在 URL 中使用 anchor 加载页面时的平滑滚动而言，这可能特别困难，因为浏览器可能会在 JavaScript 捕获 anchor 并执行任何操作之前跳转到 anchor 。要使其正常工作，您可能需要链接到一个假 anchor 名称，并在哈希中使用该假 anchor 名称以使用 JavaScript 滚动到页面中的真实 anchor 。例如，链接到 #anc-about 并使用 JavaScript 提取“anc-”，然后滚动到 #about。