0

我最初在没有任何 JavaScript 的情况下构建了这个网页 (www.michaelhigginson.com)。我添加了一些 JavaScript 来动画我的锚标签的滚动。

我的问题是当我按下任何特定的锚链接时，#anchor_name 不再出现在 URL 栏中。我还希望能够发送诸如 www.michaelhigginson.com/#print 之类的链接并加载页面，然后滚动到页面上的该点。如果有人手动滚动，也许有一种方法可以让#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;
        });
    });

谢谢。

4

1 回答 1

0

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

就使用 URL 中的锚点在页面加载时平滑滚动而言，这可能特别困难，因为浏览器可能会在 JavaScript 捕获并执行任何操作之前跳转到锚点。为了让它工作，你可能需要链接到一个虚假的锚点名称，并在散列中使用该虚假的锚点名称来使用 JavaScript 滚动到页面中的真实锚点。例如，链接到#anc-about并使用 JavaScript 拉出“anc-”，然后滚动到#about.

于 2013-05-27T21:11:06.827 回答