オフィシャルがスクロールjsできなかった。ie8対応と書いてあるから
ワードプレス関連の相性か?不明
対応策
ie8以下のみに読み込ますもの
それ以外に読み込ます物をわける
ie8以下のみに読み込ますもの
<!--[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
これで対応してみよう。