クリックしたらページのトップに戻る

最終更新日: 2019年07月04日

ポイントはターゲットにhtmlとbodyの両方を指定するところ。

$(function(){
  $('#page-top').on('click', function () {
    $('body,html').animate({
      scrollTop: 0
    }, 500);
    return false;
  });
});

$(function(){

$('#page-top').on('click', function () {

$('body,html').animate({

scrollTop: 0

}, 500);

return false;

});

scrollTopプロパティは通常は縦方向のスクロール位置を取得するメソッドとして使われる。

$('div').scrollTop();

1	$('div').scrollTop();

( )の中に引数として数値を指定することで縦方向の位置を設定する使い方もできる。

$('div').scrollTop(300);

1	$('div').scrollTop(300);

この応用としてanimateのプロパティの変化値として0を指定することで一番上まで戻れる。

コメントはありません。