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;とページ内リンクを同時に使う時は要注意です。
