IE10,IE9でjQeuryでページスクロールできなかった

よくアルやつ、ページの下までいってボタンを押すとスクロールしたりするタイプのスクリプトで通常はなんともないのですが、なぜかIE10以下でできないことがありました。(今更IE10とかなのですが、世の中の大企業では更新がやたら遅い仕様があり。。)

以下の通りの実装でしたが、aタグにイベントを紐付けていたらエラー、外包しているdivにイベントつけるとOKでした。謎でした。

# html部分
<div id="pagetop">
    <a data-role="pagetop" href="#"><img src="/journey/img/icon_pagetop.png" alt="pagetop"></a>
</div>

# script部分 NG
$('[data-role=pagetop]').on('click',function(e){
    e.preventDefault();
    $('html,body').animate({scrollTop:0},1000);
});

# script部分 OK
$('#pagetop').on('click',function(e){
    e.preventDefault();
    $('html,body').animate({scrollTop:0},1000);
});

タグ: scroll