使用javascript进行锚点跳跃 [英] anchor jumping by using javascript

问题描述

我有一个经常会被发现的问题.问题是找不到明确的解决方案.

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

主要目标应该是在使用锚点跳转到页面时获得一个干净的 url，其中没有任何哈希值.

所以anchors的结构是:

<li><a href="#one">One</a></li><li><a href="#two">Two</a></li><li><a href="#three">三</a></li>
<div class="wrap"><a name="one">text 1</a><a name="two">text 2</a><a name="three" class="box">text 3</a>

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

<块引用>

www.domain.com/page#1

最后应该是:

<块引用>

www.domain.com/page

到目前为止，一切都很好.现在第二件事是，当您在互联网上搜索该问题时，您会发现 javascript 作为解决方案.

我找到了这个功能:

function jumpto(anchor){window.location.href = "#"+anchor;}

并使用以下命令调用该函数:

One

什么会和以前一样.它将哈希添加到 url.我也加了

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

非常感谢.

解决方案

可以获取目标元素的坐标并为其设置滚动位置.但这太复杂了.

这是一种更懒惰的方法:

函数跳转(h){var url = location.href;//保存没有哈希的URL.location.href = "#"+h;//转到目标元素.history.replaceState(null,null,url);//不喜欢散列.改回来.}

这使用 replaceState 操作网址.如果您还希望 支持 IE，那么您必须这样做 复杂的方式:

函数跳转(h){var top = document.getElementById(h).offsetTop;//获取目标元素的Ywindow.scrollTo(0, top);//直接去那里或一些过渡}

演示:http://jsfiddle.net/DerekL/rEpPA/
另一个带过渡:http://jsfiddle.net/DerekL/x3edvp4t/

您也可以使用 .scrollIntoView:

document.getElementById(h).scrollIntoView();//即使IE6也支持这个

_{(好吧，我撒谎了.一点也不复杂.)}

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 a lot.

解决方案

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屋！