80

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

ユーザーが「リンク」をクリックすると、ページジャンプなしでハッシュタグが変更されるため、正常に機能しています。

しかし、ユーザーが「リンク解除」をクリックすると、hasタグが削除され、ページがスクロールして一番上にジャンプします。この副作用なしにハッシュを削除する必要があります。

4

8 に答える 8

98

ダミーのハッシュを入れるだけでは、スクロールする一致がないため、スクロールしないと思います。

<a href="#A4J2S9F7">No jumping</a>

また

<a href="#_">No jumping</a>

"#"それ自体は同等"_top"であり、ページの上部にスクロールします

于 2010-02-19T11:30:12.707 に答える
38

私はいくつかのサイトで以下を使用しています.ページジャンプはありません!

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
});
于 2011-10-18T10:39:35.503 に答える
18

window.location の hash プロパティは、いくつかの点でばかげています。これはその 1 つです。もう 1 つは、get 値と set 値が異なることです。

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(/#.*$/, '#'); 
}
于 2010-02-19T11:39:39.690 に答える
3

これは古い投稿ですが、ソリューションを共有したいと思いました。JSによって処理されるプロジェクト内のすべてのリンクには、href = "＃_ js"属性（またはその目的でのみ使用する名前）があり、ページの初期化時にそうです：

$('body').on('click.a[href="#_js"]', function() {
    return false;
});

それはトリックを行います

于 2012-08-17T13:13:02.573 に答える
2

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');

お役に立てれば。

于 2010-02-19T11:49:13.907 に答える
1

これが望ましい結果をもたらすかどうかはわかりません。試してみてください：

$('<a href="#">').text('unlink').click(function(e) {
    e.preventDefault();
    var st = parseInt($(window).scrollTop())
    window.location.hash = '';
    $('html,body').css( { scrollTop: st });  
});

基本的にスクロールオフセットを保存し、空のハッシュを割り当てた後に復元します。

于 2010-02-19T11:35:54.927 に答える
1

return false;イベントハンドラで試しましたか? jQueryはそれを行うと何か特別なことをしますe.preventDefault.

于 2010-02-19T11:43:25.033 に答える
0

お役に立てれば

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

于 2015-05-03T15:39:25.087 に答える