javascriptで、ブラウザの判別を処理を変える、もしくはどのブラウザでも同じ動きになるようにしなきゃいけない時があると思います。

いつも使っているページ内リンクのスクロールの処理（スムーススクロールみたいな）があり、
それが下記になります。

ページ内スクロールでjqueryでアニメーションさせようとすると、
$(‘body’)で指定したい所ですが、firefoxやieでは、bodyはだめでhtmlを指定しなくてはいけません。
そこでブラウザを判別して、firefoxとieの時に、htmlで指定するようにしていました。

IE11でスクロールが動かない

しかし！
この前、IE11でスクロールが動かないといわれ、調べてみた結果、タイトルにある通り、
ie10以下は、「msie」の判別なのですが、ie11では「trident」に変更されておりました。

その為、少し書き加えました。
それが以下になります。

JavaScript

$(function() { $('a[href^=#]').click(function() { var speed = 400; // ミリ秒 var href = $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); //$($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing'); var body = 'body'; var userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf('msie') > -1 || userAgent.indexOf('trident') > -1 || userAgent.indexOf("firefox") > -1 ) { /*IE6.7.8.9.10.11*/ body = 'html'; } $(body).animate({ scrollTop: position }, speed, 'swing'); return false; }); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$(function() {   $('a[href^=#]').click(function() {     var speed = 400; // ミリ秒     var href = $(this).attr("href");     var target = $(href == "#" || href == "" ? 'html' : href);     //$($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing');     var body = 'body';     var userAgent = window.navigator.userAgent.toLowerCase();     if (userAgent.indexOf('msie') > -1 || userAgent.indexOf('trident') > -1 || userAgent.indexOf("firefox") > -1 ) { /*IE6.7.8.9.10.11*/       body = 'html';     }     $(body).animate({       scrollTop: position     }, speed, 'swing');     return false;   }); });

こちらで問題なく動きました！！

なぜ、msieではなくなったんでしょうかね・・・

そして気になるのが、今後ie12からはどうなるんでしょうか。

また、変更されてしまったら、またスクリプトを修正しないといけないので、
そもそもブラウザに左右されないスクリプトにしないといけないかもしれませんね。

暇があれば、それに挑戦してみようかと思います。

今回デモは特にないのですが、
弊社のサイトで使用しているので、
そちらをご覧ください。