ie8に対する見解

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!--[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]-->

それ以外

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--[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以下は
スクロールを

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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のセレクタは使用できなかった。

1
2
<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
これで対応してみよう。