scroll」タグアーカイブ

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

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);
});

jQueryでページ内リンクへスムーズにスクロールする方法

jQueryでページ内リンクへスムーズにスクロールする方法

いつも忘れるのでメモ。

$("a[href^='#']").click(function(e) {
    e.preventDefault();
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $('body,html').stop().animate({scrollTop:position}, 400);
});