レンタルサーバー活用方法｜jQueryサンプル

レンタルサーバー活用方法｜jQueryサンプル－ページスクロール

このページ下にもついている「ページの先頭へ」をクリックすると、スルスルとページの先頭へスクロールしていきます。

このコードを書いてみましょう。

$('#go_top').click(function () {
  $('html,body').animate({ scrollTop: 0 }, 'slow');
});

これを前のページに書いた、「ここにコードを記述」の位置にコピーします。

そして、ページの下の方に

<a href="#" id="go_top">ページの先頭へ</a>

を追記します。

全体的な例としては以下の様になります。

<html>
<head>
<meta http-equiv="content-script-type" content="text/javascript">
<script type="text/javascript" src="jQuery-1.2.6.min.js"></script>
<script type="text/javascript">
<!--
$(function () {

  $('#go_top').click(function () {
    $('html,body').animate({ scrollTop: 0 }, 'slow');
  });

});
// -->
</script>
</head>
<body>
   :
   :
<a href="#" id="go_top">ページの先頭へ</a>
</body>
</html>

これで「ページの先頭へ」をクリックするとスルスルとページ先頭へスクロールしていくと思います。

もし正常に動作しないようでしたら、jQueryの設置位置、呼び出し、「;」等コードの記述ミスが無いか確認してみてください。

※このページで紹介しているサンプルは「jQuery 1.2.6」を使用しています。バージョンの違い等により正常に動作しない場合がありますのでご注意ください。

ページの先頭へ