如何编辑网址名称，同时动画JavaScript锚滚动？
提问于 2013-05-27 12:11:48
我最初构建的这个保持页面(www.michaelhigginson.com)没有任何JavaScript。我添加了一些JavaScript来动画我的锚标签的滚动。
我的问题是，当我按下任何特定的锚链接时，#anchor_name不再出现在地址栏中。我也希望能够发送一个链接，如www.michaelhigginson.com/#print，并加载页面，然后滚动到页面上的那个点。如果有人正在手动滚动，那么也许有一种方法可以在到达锚点时进行#anchor_name更改。
我希望这是合理的。8天前，我才开始学习HTML、CSS和JavaScript，所以我对JavaScript的理解仍然相当基础。
以下是我到目前为止所得到的一个简化版本。http://jsfiddle.net/rVHz7/
<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">|</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;
});
});谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-05-27 13:11:06
锚散列不再出现在URL中，因为单击时返回false，从而阻止它对其做任何进一步的操作。如果您删除return false，它将修复它，但是在滚动之前它也可能会结结巴巴的，因为浏览器想要采取本机操作。我建议使用this answer中的最后一个解决方案来解决这个问题。
如果要在页面上顺利滚动URL中的锚点，这可能特别困难，因为浏览器很可能会跳到锚点，然后JavaScript才能捕获它并执行任何操作。要使其工作，您可能需要链接到假锚名，并使用散列中的假锚名来使用JavaScript滚动到页面中的真正锚点。例如，链接到#anc-about，并使用JavaScript完成"anc-“，然后滚动到#about。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16779936
复制相关文章
腾讯云开发者
