☰

JavaScript をトリガーするリンクがクリックされたときに、Web ページが上部にスクロールするのを停止するにはどうすればよいですか? 質問する

tag-icon • tag-icon javascript html
JavaScript をトリガーするリンクがクリックされたときに、Web ページが上部にスクロールするのを停止するにはどうすればよいですか? 質問する

次のような jQuery または JavaScript イベントに関連付けられたリンクがある場合:

<a href="#">My Link</a>

ページが上部までスクロールしないようにするにはどうすればよいですか? アンカーから href 属性を削除すると、ページは上部までスクロールしませんが、リンクはクリックできないように見えます。

ベストアンサー1

クリック イベントのデフォルトのアクション (リンク ターゲットへの移動など) が発生しないようにする必要があります。

これを行うには 2 つの方法があります。

オプション1：event.preventDefault()

.preventDefault()ハンドラに渡されたイベントオブジェクトのメソッドを呼び出します。ハンドラをバインドするためにjQueryを使用している場合、そのイベントは次のインスタンスになります。jQuery.EventそしてそれはjQuery版になります.preventDefault()addEventListenerハンドラをバインドするために使用している場合は、Eventそして生のDOMバージョン.preventDefault()どちらの方法でも必要なことはできます。

例:

$('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
});

document.getElementById('#ma_link').addEventListener('click', function (e) {
    e.preventDefault();
    doSomething();
})

オプション2:return false;

jQueryでは:

イベントハンドラからfalseを返すと、event.stopPropagation()とevent.preventDefault()が自動的に呼び出されます。

したがって、jQuery では、代わりに次のアプローチを使用して、デフォルトのリンク動作を防ぐことができます。

$('#ma_link').click(function(e) {
     doSomething();
     return false;
});

生のDOMイベントを使用している場合、HTML 5仕様でこの動作が規定されているため、これは最新のブラウザでも動作します。ただし、仕様の古いバージョンでは規定されていなかったため、古いブラウザとの互換性を最大限にする必要がある場合は、.preventDefault()明示的に呼び出す必要があります。event.preventDefault() と return false (jQuery なし)仕様の詳細については。

おすすめ記事