ページ上のスクロール開始位置を決定するJavascript？

Question

I「固定」ヘッダを備えサイトは、問題はそれが本当にページラ「http://mysite.com/#lower_div_on_the_page」それも

ですさらに下のリンクリンクを台無しということです持っています

if (URL has #hashtag) {starting scroll position = normal position + (my_header_height)} 

このようなことを行うにはjavascriptを使用できますか？

編集： すべての返信をありがとう...本当に感謝しています。参考までに、私はjQueryを使いこなしています... jQueryを使ってどうすればいいですか？

Answer 1

はい、可能です。ここで

はあなたが取る必要がある手順です。

• はDOM Loadedイベントハンドラを設定します。これを行う方法は2つ以上あり、ここにはlink to a web page that explains how to do thisがあります。また、jQuery（.ready()を参照）やPrototype.js（observe extensionを参照）などのjavascriptフレームワークを使用している場合は、はるかに簡単です。

• DOM読み込みイベントハンドラ関数では、ハッシュタグのURL（window.location）を解析します。

  var hashTag = window.location.href;
hashTag = hashTag.substr(hashTag.indexOf('#') + 1);
// now hashTag contains the portion of the URL after the hash sign

• あなたはアンカータグを認識した場合、DOMツリーまたは任意のロジック使用したいでその要素の位置に基づいて、所望のスクロール位置を計算。ここでも、jQuery（.offset()を参照）またはPrototype.js（cumulativeScrollOffsetを参照）は、スクロールする正しいオフセットを決定するのに役立つはずです。

• ページのスクロールを設定します。ここでもjQueryの（.scrollTop()を参照）またはprototype.jsの（scrollToを参照）の両方これを支援するための拡張機能を持っています。ここで

は、jQueryの例だ：それは明らかに簡単になるだろう、とあなたが必要となるのjQueryを使用して

if(window.location.hash != ''){ 
    elementOffset = document.getElementById(window.location.hash.substr(1)).offsetTop; 
    window.scrollTo(0,elementOffset + my_header_height); 
} 

：

$(document).ready(function() { 
    var hashTag = window.location.href; 
    if(hashTag.indexOf('#') > 0) 
    { 
     hashTag = hashTag.substr(hashTag.indexOf('#')); 

     // now get the element's offset relative to the document 
     var offsetTop = $(hashTag).offset().top; 

     // and finally, scroll the document to that offset 
     $(document).scrollTop(offsetTop); 
    } 
}); 

Answer 2

は確実である、あなたは、のような単純な何かができます要素や要素を含むことに応じて余分なオフセットを得ることができますが、それはあなたを起動させるはずです。