タグ: セレクタ

オフィシャルがスクロールjsできなかった。ie8対応と書いてあるから
ワードプレス関連の相性か？不明

対応策
ie８以下のみに読み込ますもの
それ以外に読み込ます物をわける

ie８以下のみに読み込ますもの

<!--[if lt IE 9]> 
<script src="/js/html5shiv-printshiv.min.js"></script>
<script type="text/javascript" src="/js/selectivizr.js"></script>
<script>
//スムーズスクロール
jQuery(function(){
   // #で始まるアンカーをクリックした場合に処理
   jQuery('a[href^=#]').click(function() {
	  // スクロールの速度
	  var speed = 400; // ミリ秒
	  // アンカーの値取得
	  var href= jQuery(this).attr("href");
	  // 移動先を取得
	  var target = jQuery(href == "#" || href == "" ? 'html' : href);
	  // 移動先を数値で取得
	  var position = target.offset().top;
	  // スムーススクロール
	  jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
	  return false;
   });
});
</script>
<style type="text/css">
#go1,#go2,#go3,#go4,#go5,#go6,#go7{
	margin-top: -160px;
	padding-top: 160px;
}
</style>
<![endif]-->

それ以外

<!--[if (gte IE 9)|!(IE)]><!-->
<script type="text/javascript" src="/js/jquery.multirollover.js"></script>

<script>
	$(document).ready(function() {
		$('#head_rogo a').multirollover({
			crossfade	: true,
			suffix		: '_on',
			duration	: 300,

		});
	});
</script>

<script type="text/javascript" src="/js/jquery.page-scroller-309.js"></script>
<!--<![endif]-->

今回は8以下は
スクロールを

<script>
//スムーズスクロール
jQuery(function(){
   // #で始まるアンカーをクリックした場合に処理
   jQuery('a[href^=#]').click(function() {
	  // スクロールの速度
	  var speed = 400; // ミリ秒
	  // アンカーの値取得
	  var href= jQuery(this).attr("href");
	  // 移動先を取得
	  var target = jQuery(href == "#" || href == "" ? 'html' : href);
	  // 移動先を数値で取得
	  var position = target.offset().top;
	  // スムーススクロール
	  jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
	  return false;
   });
});
</script>

で対応し
アンカーをあえて空DIVを入れて
パディングとマイナスマージンで対応

こういう調整は空DIVの有用性ってあるねって思ったし！

結局ie8のセレクタは使用できなかった。

<script src="/js/html5shiv-printshiv.min.js"></script>
<script type="text/javascript" src="/js/selectivizr.js"></script>

こいつをいれる

しかし
デザイン的なcssのずれなどは治った。

どうしても何番目かを指定したい場合は
http://tasudesign.com/web-desing/nth-child/
http://www.gravity-works.jp/gravica/web/003862.html
これで対応してみよう。