通过使用JavaScript跳转锚 [英] anchor jumping by using javascript

问题描述

你好，我有一个很常见的问题。问题是，无处可以找到明确的解决方案。

我有两个关于锚点的问题。

主要目标应该是在使用锚点跳转到页面时获得一个干净的网址，而不需要任何哈希。

所以锚点的结构是：

 < ul> 
< li>< a href =＃one> One< / a>< / li> 
< li>< a href =＃two>两个< / a>< / li> 
< li>< a href =＃three>三< / a>< / li> 
< / ul> 
 
< div class =wrap> 
< a name =one>文字1< / a> 
< a name =two>文字2< / a> 
< a name =threeclass =box>文字3< / a> 
< / div> 
  

好的，如果您点击其中一个链接，网址将自动更改为

www.domain.com/page#1

at最后这应该只是：

www.domain.com/page

到目前为止非常好。现在第二件事情是，当你在网上搜索这个问题时，你会发现javascript是一个解决方案。

我找到了这个函数：

 函数jumpto（anchor）{
 window.location.href =＃+ anchor; 
} 
  

并用以下函数调用该函数：

 < a onclick =jumpto（'one'）;> One< / a> 
  

会和以前一样。它会将哈希值添加到网址中。我还添加了

 < a onclick =jumpto（'one'）; return false;> 
  

没有成功。所以如果有人能告诉我如何解决这个问题，我真的很感激。

非常感谢。

解决方案

您可以获取目标元素的坐标并将滚动位置设置为它。但这太复杂了。

这是一种更懒惰的方式来做到这一点：

  function jump（h）{
 var url = location.href; //保存网址而不用散列。 
 location.href =＃+ h; //转到目标元素。 
 history.replaceState（null，null，url）; //不喜欢哈希。改回它。 
} 
  

这使用 replaceState 来操纵网址。如果您还希望支持IE ，那么您必须执行复杂的方式：

 函数跳转（h）{
 var top = document.getElementById（h）.offsetTop; //获取目标元素的Y 
 window.scrollTo（0，top）; //直接进入或转换
 
 code $ <$ $ p 
 
 
演示：http://jsfiddle.net/DerekL/rEpPA/  
 
另一个w / transition：http://jsfiddle.net/DerekL/x3edvp4t/   b 
 $ b 
您也可以使用  .scrollIntoView  ：
  document.getElementById（h）.scrollIntoView（）; //即使IE6支持这个
  
   根本不复杂。）   
 
hello i have a question that will be found very often. the problem is that nowhere can be found an explicit solution.

i have two problems regarding anchors.

the main goal should be to get a nice clean url without any hashes in it while using anchors to jump on a page.

so the structure of the anchors is:
<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>
okay, if you will click one of the links the url will automatically change to 

  
www.domain.com/page#1
at the end this should be just:

  
www.domain.com/page
so far so good. now the second thing is, when you search the internet for that problem you will find javascript as a solution.

i have found this function:
function jumpto(anchor){
    window.location.href = "#"+anchor;
}
and calling that function with:
<a onclick="jumpto('one');">One</a>
what will be the same like before. it will add the hash to the url. i also added
<a onclick="jumpto('one'); return false;">
without success. so if there is someone who could tell me how to solve this i really would appreciate.

Thanks alot.
解决方案
You can get the coordinate of the target element and set the scroll position to it. But this is so complicated.

Here is a lazier way to do that:
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.
}​
This uses replaceState to manipulate  the url. If you also want support for IE, then you will have to do it the complicated way:
function jump(h){
    var top = document.getElementById(h).offsetTop; //Getting Y of target element
    window.scrollTo(0, top);                        //Go there directly or some transition
}​
Demo: http://jsfiddle.net/DerekL/rEpPA/

Another one w/ transition: http://jsfiddle.net/DerekL/x3edvp4t/

You can also use .scrollIntoView:
document.getElementById(h).scrollIntoView();   //Even IE6 supports this
(Well I lied. It's not complicated at all.)

                        
这篇关于通过使用JavaScript跳转锚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！