ページを一番上までジャンプスクロールせずに、window.location
からハッシュを削除することはできますか?ジャンプを引き起こさずにハッシュを変更できる必要があります。
私はこれを持っています:
$('<a href="#123">').text('link').click(function(e) {
e.preventDefault();
window.location.hash = this.hash;
}).appendTo('body');
$('<a href="#">').text('unlink').click(function(e) {
e.preventDefault();
window.location.hash = '';
}).appendTo('body');
こちらのライブ例をご覧ください: http://jsbin.com/asobi
ユーザーが「link」をクリックすると、ページジャンプなしでハッシュタグが変更されるため、正常に機能します。
しかし、ユーザーが「unlink」をクリックすると、hasタグが削除され、ページがスクロールしてトップにジャンプします。この副作用なしでハッシュを削除する必要があります。
ダミーのハッシュを入れただけではスクロールする一致がないためスクロールしないと思います。
<a href="#A4J2S9F7">No jumping</a>
または
<a href="#_">No jumping</a>
"#"
自体は"_top"
と同等であるため、ページの上部にスクロールします
私はいくつかのサイトで以下を使用しています。ページジャンプはありません!
HTML5フレンドリーブラウザー用のすっきりしたアドレスバー。古いブラウザー用の#のみ。
$('#logo a').click(function(e){
window.location.hash = ''; // for older browsers, leaves a # behind
history.pushState('', document.title, window.location.pathname); // Nice and clean
e.preventDefault(); // no page reload
});
window.locationのhashプロパティは、いくつかの点で愚かです。これはそのうちの1つです。もう1つは、取得値と設定値が異なることです。
window.location.hash = "hello"; // url now reads *.com#hello
alert(window.location.hash); // shows "#hello", which is NOT what I set.
window.location.hash = window.location.hash; // url now reads *.com##hello
ハッシュプロパティを ''に設定すると、ハッシュマークも削除されることに注意してください。それがページをリダイレクトするものです。 URLのハッシュ部分の値を ''に設定し、ハッシュマークを残して更新しないようにするには、次のように記述します。
window.location.href = window.location.href.replace(/#.*$/, '#');
ページを更新せずに一度設定したハッシュマークを完全に削除する方法はありません。
2012年更新:
Blazemongerとthinkdjが指摘したように、テクノロジーは改善されました。一部のブラウザでは、そのハッシュタグをクリアできますが、そうでないブラウザもあります。両方をサポートするには、次のようなものを試してください:
if ( window.history && window.history.pushState ) {
window.history.pushState('', '', window.location.pathname)
} else {
window.location.href = window.location.href.replace(/#.*$/, '#');
}
これは古い投稿ですが、ソリューションを共有したかったです。JSによって処理されるプロジェクト内のすべてのリンクは、href = "#_ js"属性(またはその目的のみに使用する名前)を持ち、ページの初期化時に私がやります:
$('body').on('click.a[href="#_js"]', function() {
return false;
});
それはトリックをします
Window.location.hashを空または存在しないアンカー名に設定すると、常にページが先頭にジャンプします。これを防ぐ唯一の方法は、ウィンドウのスクロール位置を取得し、ハッシュの変更後に再びその位置に設定することです。
また、これはページの再描画を強制します(それを避けることはできません)が、単一のjsプロセスで実行されるため、(理論的には)上下にジャンプしません。
$('<a href="#123">').text('link').click(function(e) {
e.preventDefault();
window.location.hash = this.hash;
}).appendTo('body');
$('<a href="#">').text('unlink').click(function(e) {
e.preventDefault();
var pos = $(window).scrollTop(); // get scroll position
window.location.hash = '';
$(window).scrollTop(pos); // set scroll position back
}).appendTo('body');
お役に立てれば。
これで望ましい結果が得られるかどうかはわかりませんが、試してみましょう。
$('<a href="#">').text('unlink').click(function(e) {
e.preventDefault();
var st = parseInt($(window).scrollTop())
window.location.hash = '';
$('html,body').css( { scrollTop: st });
});
基本的に、スクロールオフセットを保存し、空のハッシュを割り当てた後に復元します。
やってみました return false;
イベントハンドラで? jQueryは、e.preventDefault
。
これが役立つことを願っています
html
<div class="tabs">
<ul>
<li><a href="#content1">Tab 1</a></li>
<li><a href="#content2">Tab 2</a></li>
<li><a href="#content3">Tab 3</a></li>
</ul>
</div>
<div class="content content1">
<p>1. Content goes here</p>
</div>
<div class="content content2">
<p>2. Content goes here</p>
</div>
<div class="content content3">
<p>3. Content goes here</p>
</div>
js
function tabs(){
$(".content").hide();
if (location.hash !== "") {
$('.tabs ul li:has(a[href="' + location.hash + '"])').addClass("active");
var hash = window.location.hash.substr(1);
var contentClass = "." + hash;
$(contentClass).fadeIn();
} else {
$(".tabs ul li").first().addClass("active");
$('.tabs').next().css("display", "block");
}
}
tabs();
$(".tabs ul li").click(function(e) {
$(".tabs ul li").removeAttr("class");
$(this).addClass("active");
$(".content").hide();
var contentClass = "." + $(this).find("a").attr("href").substr(1);
$(contentClass).fadeIn();
window.location.hash = $(this).find("a").attr("href");
e.preventDefault();
return false;
});
ハッシュなしのURL。
http://output.jsbin.com/tojeja
アンカーにジャンプしないハッシュタグ付きのURL。
http://output.jsbin.com/tojeja#content1