2009-09-05 20 views
5

私はJavascriptで切り替えることができる2つのタブを持つページを持っているだけでなく、ブックマーク/リンクのURLにアンカー(例:page.html#tab1)を設定しています。URLアンカーは有効にしますが、スクロールしませんか?

デフォルトでは、タブの内容は2つのdivに分かれていて、アンカータグはJSを無効にして正しいものにスクロールします。

JSを有効にすると、CSSクラスが適用されてタブとして機能します。各タブは各アンカーにリンクしますが、クリックするとタブを切り替えると、そのページがそのタブにスクロールします。 onclick関数からfalseを返すと、URLはアンカーを含むように変更されません。

ブラウザのURLをpage.html#tab1に変更しますが、#tab1にスクロールしないようにするにはどうすればよいですか?

答えて

5

私は当初あなたを信じていなかったので(私はjQuery history pluginを使用して同様の動作をさせるため)、これをしばらくプレイしました。

私は困惑しています。私はあなたができるとは思わない。 となります。回避策はuse javascript to set the hash to something DIFFERENT from what is actually on the pageです。そして、ロード時にjavascriptを使用してハッシュを読み取り、正しいコンテンツを入力します。 I do this on my site。だから、そのシナリオでは、javascriptのないユーザーはスクロールされ、javascriptを使用するユーザーは履歴チェーンを保持し、人々とのリンクを送信しない(またはその逆)人がいない場合にのみ不吉な状態になります。

+0

これはうまくいき、validator.w3.orgがしていることが分かりました。結局、私は非JSブラウザで正しい場所にアンカージャンプをすることを決めました。なぜなら、2つのdivはそれほど高くはないからです.JSを使用できるユーザーからJS以外のユーザーのリンクが機能しなくなったとします。 – DisgruntledGoat

-1
window.location.hash = 'tab1'; 

が機能する可能性があります。

+1

いいえ、それはアンカーにスクロールします(ただし、Safariの場合は、location.hashの壊れたサポートのおかげであります)。 – andynormancx

0

アンカーの名前を変更し、window.location.hashを設定してアンカーの名前を変更したJavascriptがありますか?

(私はandynormancxが正しいと確認しました。window.location.hashを設定するとビューがスクロールされますが、DOMのanchorをwindow.location.hashにスクロールするとテストするのが面倒です。)

0
var Namespace = { 
    var timer, scroll; 
} 

// Onclick 
Namespace.scroll = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; 
Namespace.timer = setInterval(function() { scrollTo(0, Namespace.scroll) }, 100); 
location.hash = this.href; 
clearInterval(Namespace.timer); 
1

迅速なハック:

var thehash = e.target.hash; 
$(thehash).prop('id',thehash.substr(1)+'-noscroll'); 
window.location.hash = e.target.hash; 
$(thehash+'-noscroll').prop('id',thehash.substr(1));  

これは前とURLのハッシュを変更した後、HTML要素のidを変更します。私のために働くが、何かを壊すかもしれない。これにより、そのidを持つhtml要素が存在しないため、ブラウザがハッシュ変更をスクロールするのを防ぐことができます。

+0

これは私のために働いた(心から期待していた)。間違いなくそれにハックのような品質を持っていますが、これまでに何の問題も見ていません。 –

関連する問題