overflow:hidden;とページ内リンクを同時にしようしたら表示がおかしくなる件を解決

overflow:hidden;とページ内リンクを同時にしようしたら表示がおかしくなる件を解決

コンテンツとサイドバーをfloatしてレイアウトする際に、デザイン上でサイドバーがfooterまでついている場合があります。

その時にはサイドバーにmargin-bottom: -10000px;とpadding-bottom: 10000px;を書いてコンテンツにはoverflow:hidden;を書きます。

そうする事でサイドバーの高さをコンテンツと同じ高さにできるのでサイドバーの背景がずっとついてくる形にコーディングできます。

しかし、ここで問題が…ページ内リンク()を設定すると表示が崩れてしまいました!

別ページへのアンカーリンクで不具合が発生

jqueryのページ内スクロールを使用することでページ内でのスクロールは問題なく動いていました。

しかし、別ページのアンカーリンクの場所にリンクをつけた途端に挙動がおかしくなりました。

こんな感じの画像になる

javascriptでのアンカーリンクを使用で解決

参考サイトはこちら。

$(function(){
var url = $(location).attr('href');

if (url.indexOf("?id=") == -1) {
// スムーズスクロール以外の処理(必要なら)

}else{
// スムーズスクロールの処理
var url_sp = url.split("?id=");
var hash = '#' + url_sp[url_sp.length - 1];
var tgt = $(hash);
var pos = tgt.offset().top;

$("html, body").animate({scrollTop:pos}, 2000, "swing");
}
});

こちらを使用する事で解決しました。

アンカーリンクに指定する所の書き方が「#hoge」から「?id=hoge」とう書き方に変わるだけなので 特にhtmlをいじる必要がなかったのでよかったです。

overflow:hidden;とページ内リンクを同時に使う時は要注意です。