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

StackOverflow https://stackoverflow.com/questions/1218034

質問

私はすべて<！> quot; pseudo-anchors。<！> quot;という一意のIDを持つさまざまなリンクを持っています。 URLハッシュ値に影響を与え、クリックマジックはすべてmootoolsコードによって処理されます。ただし、リンクをクリックすると、リンク自体（または、場合によっては上部）までスクロールします。どこにもスクロールしたくありませんが、URL更新でハッシュ値を実行するためにjavascriptも必要です。

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

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

つまり、<！> quot;ボタン1 <！> quotをクリックすると、リンク、URLは http://example.com/foo.php#button1

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

役に立ちましたか？

解決

おそらく何かが足りないのですが、なぜそれらに異なる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>

またはあなたが好むどんな規則でも。

他のヒント

アンカーリンクのポイントは、ページを特定のポイントまでスクロールすることです。そのため、これを行わない場合は、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が一意である必要があります）

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

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

解決策を見つけました。ここでは、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>

に感謝サイトポイント

また、preventDefault 

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

もっと簡単な方法は、おそらくGETとして追加することでしょう。つまり、http://example.com/foo.php?q=#button1

ではなくhttp://example.com/foo.php#button1

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

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

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

Chrome 56、Firefox 52、およびEdge（IE？）38で問題なく動作しました。もう1つの良い点は、コンソールエラーや警告が発生しないことです。

私以外の誰かに役立つことを願っています。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top