【困ったメモ】アンカーリンクの位置調整

ちょっとした問題の解決策を探していたけど、なかなか見つからず長期戦になりそうなので後回しにするため、問題把握のためのメモ。

横スクロール型コンテンツの表示領域を950*580にclearfix:hiddenで限定している。この表示領域はposition:relativeとネガティブマージンを使ってウィンドウの上下左右中央寄せにしている。
その表示領域でページ内リンクを利用するとき、リンク先の要素をウィンドウの左端ぴったりに表示するので、思いっきり非表示領域に被ってしまう。

で、じゃあこの非表示部分に被っている分だけマージンを稼いでおけば・・・と考えたんですが（そういう解決方法はたくさんまとめてくれる人がいらっしゃいました）、この表示領域は先述したとおり上下左右中央寄せしているので、被る部分の数値がユーザーの使うディスプレイやブラウザウィンドウの大きさで変わる・・・。

なのでCSSのほうで被る部分の余白を数値で設定しておくのは結局、ウィンドウの大きさを変えればまたズレてしまうのであまり意味はなさそう。
jQueryでアンカーリンクをスムーズスクロールさせているのですが、そこらへんでなんとかならないかなあ。
javascriptでウィンドウ端から表示領域までの距離を検知する方法とかって、ないのかなあ・・・。

スムーススクロールでするするーっと横に移動するのがやりたいんですが、やっぱり作っていると課題が山積みです。


追記
いろいろ調べていたら、アンカーリンクの挙動がおかしかったのは、ｊQueryのほうだった。
ためしにｊQueryのアンカーリンクをイージースクロールさせる処理をコメントアウトさせてみると、中央寄せでclearfixかけていても問題なく表示位置へは飛んで行けた。
アンカーリンクまでの距離を($anchor.attr('href'))などで検知する方法ではなく、単純にリンク先の位置をpx指定すると問題なくイージースクロールされた。