web-dev-qa-db-ja.com

スクロールやジャンプのないHTMLアンカーリンク

「疑似アンカー」である一意のIDを持つすべてのリンクがあります。私はそれらにURLハッシュ値に影響を与えたいと思います。クリックマジックはすべていくつかのmootoolsコードによって処理されます。ただし、リンクをクリックすると、自分自身（または1つのケースでは上部）までスクロールします。どこにもスクロールしたくありませんが、実行して、URL更新にハッシュ値を含めるためにJavaScriptも必要です。

シミュレートされたサンプルコード：

<a href="#button1" id="button1">button 1</a>
<a href="#button2" id="button2">button 2</a>
<a href="#" id="reset">Home</a>

したがって、「ボタン1」リンクをクリックすると、URLは http://example.com/foo.php#button1 になります。

誰かこれについて何かアイデアはありますか？単にjavascriptがvoidを返すようにすると、スクロールが強制終了されますが、JavaScriptも強制終了されます（おそらくonclickで回避できます）が、さらに重要なことに、URLのハッシュ値が変更されないようにします。

javascripthtmlxhtmlscrollanchor
24
Neil

私はおそらく何かが足りないのですが、なぜそれらに異なるIDを与えないのですか？

<a href="#button1" id="button-1">button 1</a>
<a href="#button2" id="button-2">button 2</a>
<a href="#" id="reset">Home</a>

またはあなたが好むどんな慣習でも。

9
Peter Bailey

アンカーリンクの目的は、ページを特定のポイントまでスクロールすることです。そのため、これを実行したくない場合は、onclickハンドラーをアタッチしてfalseを返す必要があります。属性として追加するだけでも機能するはずです。

<a href="#button1" id="button1" onclick="return false">button 1</a>

上記の副作用として、falseを返すとイベントがキャンセルされるため、URL自体は変更されません。したがって、URLを実際に変更する必要があるため、window.location.hash変数を必要な値に設定できます（これは、ブラウザーがリロードを強制せずに変更できるURLの唯一のプロパティです）。おそらくmootoolsがイベントを処理する方法がわかりませんが、おそらくイベントハンドラーをアタッチしてwindow.location.hash = this.idのようなものを呼び出すことができます。

（また、すべてのIDが一意である必要があります）

35
Adam Batkin

以下のコードを使用して、スクロールを回避できます。

<a href="javascript:void(0);">linktxt</a>
22
kip

また、preventDefault

    $(your-selector).click(function (event) {
        event.preventDefault();
        //rest of your code here
    }
3
Vinay Raghu

私は解決策を見つけました。ここで、hrefを呼び出して古い場所を保存し、スクロールした後に復元します

<script language="JavaScript" type="text/javascript">
<!--
function keepLocation(oldOffset) {
  if (window.pageYOffset!= null){
    st=oldOffset;
  }
  if (document.body.scrollWidth!= null){
    st=oldOffset;
  }
  setTimeout('window.scrollTo(0,st)',10);
}
//-->
</script>

ページの本文

<a href="#tab1" onclick="keepLocation(window.pageYOffset);" >Item</a>

おかげで sitepoint

3
Jeff_Alieffson

より簡単な方法は、GETとして追加することでしょう。あれは、 http://example.com/foo.php?q=#button1 の代わりに http://example.com/foo.php#button1

これは、ページの表示方法に影響を与えません（必要な場合を除きます）。ほとんどのスクリプト言語には、データを簡単に（そして安全に）読み取るためのツールが既に用意されています。

1
anschauung

さてここで、この回答が公開されてから7年が経過し、それを機能させる別の方法を見つけました。存在しないアンカーにwindow.location.hashをポイントするだけです！ <a>sでは機能しませんが、<div>sでは完全に機能します。

<div onclick="window.location.hash = '#NonExistentAnchor';">button 1</div>

Chrome 56、Firefox 52およびEdge（IE？）38）で正常に動作しました。別の良い点は、これによってコンソールのエラーや警告が生成されないことです。

それが私以外の誰かを助けることを願っています。

0
Heitor