javascript - 如何在使用 effect.scrollto 方法时更改 url 名称

Question

您好，我正在使用滚动到方法来定位到某个地方的特定位置，但 url 名称始终相同。我不能有不同的 url 结尾吗？我的意思是 url 总是以 # 结尾。我不能有#products 或#about。我正在使用这个代码。请帮助我

<span><a href="#" id="start1"onclick="Effect.ScrollTo('about',{duration:1.0}); return false;"class="scroll"style="text-decoration:none;position:absolute;right:145px;top:30px;font-weight:bold;color:white;font-size:15px" onmouseover="big(this)" onmouseout="small(this)">ABOUT US</a></span>

Answer 1

您可以只使用 History API 在用户点击链接 ( https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history ) 时将 URL 更改推送到页面，例如使用 jQuery:

$("#start1").click(function(e){
    e.preventDefault();
    Effect.ScrollTo('about',{duration:1.0});
    history.pushState(null, null, '#about');
});

或者您可以考虑使用直接哈希链接，例如将 href="#about"放入 anchor 并防止散列跳跃(How can I update window.location.hash without jumping the document?)。

**编辑

这是一个 jsFiddle:https://jsfiddle.net/3uwkcebk/1/