[解決済み] javascriptによるアンカージャンプ

質問

よくありそうな質問があります。問題は、どこにも明確な解答が見つからないことです。

アンカーに関して2つの問題があります。

主な目標は、ページにジャンプするためにアンカーを使用している間、その中に任意のハッシュなしで素敵なきれいな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>

さて、あなたがリンクの1つをクリックすると、URLは自動的に次のように変更されます。

www.domain.com/page#1

最後にこれはただであるべきだ。

www.domain.com/page

ここまではいいとして。さて、2つ目は、その問題をネットで検索してみると javascript を解決策とします。

こんな機能があったんだ。

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/
もう一枚、トランジション付き。 http://jsfiddle.net/DerekL/x3edvp4t/

を使用することもできます。 .scrollIntoView :

document.getElementById(h).scrollIntoView();   //Even IE6 supports this

<サブ (まあ嘘です。全然複雑じゃないです。)