锚点使用JavaScript跳跃
你好，我有一个很常见的问题。 问题是没有find明确的解决办法。
我有两个关于锚点的问题。
主要目标应该是获得一个很好的干净的url，而不使用任何哈希，而使用锚点跳转到一个页面上。
所以锚的结构是：
<ul> <li><a href="#one">One</a></li> <li><a href="#two">Two</a></li> <li><a href="#three">Three</a></li> </ul> <div class="wrap"> <a name="one">text 1</a> <a name="two">text 2</a> <a name="three" class="box">text 3</a> </div> 好吧，如果你点击其中一个链接URL将自动改变
www.domain.com/page#1
最后这应该只是：
www.domain.com/page
到现在为止还挺好。 现在第二件事情是，当你在网上search这个问题时，你会发现javascript是一个解决scheme。
我发现这个function：
function jumpto(anchor){ window.location.href = "#"+anchor; }
并用以下函数调用该函数：
<a onclick="jumpto('one');">One</a>
什么会像以前一样。 它会将哈希值添加到url。 我还补充说
<a onclick="jumpto('one'); return false;">
没有成功。 所以如果有人能告诉我如何解决这个问题，我真的很感激。
非常感谢。
您可以获取目标元素的坐标并设置滚动位置。 但是这太复杂了。
这是一个懒惰的方式来做到这一点：
function jump(h){ var url = location.href; //Save down the URL without hash. location.href = "#"+h; //Go to the target element. history.replaceState(null,null,url); //Don't like hashes. Changing it back. }
这使用replaceState来操纵url。 如果你还想支持IE ，那么你将不得不这样做的复杂方式 ：
function jump(h){ var top = document.getElementById(h).offsetTop; //Getting Y of target element window.scrollTo(0, top); //Go there directly or some transition }
演示： http : //jsfiddle.net/DerekL/rEpPA/
另一个w /转换： http : //jsfiddle.net/DerekL/x3edvp4t/
你也可以使用.scrollIntoView ：
document.getElementById(h).scrollIntoView(); //Even IE6 supports this
（我说谎了，一点也不复杂。）
我认为这是更简单的解决scheme：
window.location = (""+window.location).replace(/#[A-Za-z0-9_]*$/,'')+"#myAnchor"
这种方法不会重新加载网站，并将重点放在屏幕阅读器所需的锚上。
因为当你这样做
window.location.href = "#"+anchor;
你加载一个新的页面，你可以这样做：
<a href="#" onclick="jumpTo('one');">One</a> <a href="#" id="one"></a> <script> function getPosition(element){ var e = document.getElementById(element); var left = 0; var top = 0; do{ left += e.offsetLeft; top += e.offsetTop; }while(e = e.offsetParent); return [left, top]; } function jumpTo(id){ window.scrollTo(getPosition(id)); } </script>
我有一个提示button，点击它将打开显示对话框，然后我可以写我想要search的内容，并将其转到页面上的该位置。 它使用JavaScript来回答标题。
在.html文件中我有：
<button onclick="myFunction()">Load Prompt</button> <span id="test100"><h4>Hello</h4></span>
在我有.js文件
function myFunction() { var input = prompt("list or new or quit"); while(input !== "quit") { if(input ==="test100") { window.location.hash = 'test100'; return; // else if(input.indexOf("test100") >= 0) { // window.location.hash = 'test100'; // return; // } } } }
当我将test100写入提示符时，它会转到我在html文件中放置span id =“test100”的地方。
我使用Google Chrome。
注意：这个想法来自使用相同的页面链接
<a href="#test100">Test link</a>
点击后会发送给主播。 对于它的工作多次，从经验需要重新加载页面。
信用在stackoverflow的人（也可能stackexchange也）不记得我是如何收集所有的零碎。 ☺
