ホームページビルダー20 SP スクロールメモ

本邦唯一日本IBM出身ホームページビルダー元開発責任者 鎌田裕二の
ホームページビルダー21教室・無料体験受付中(こちらをクリック!!)
TEL 045-567-8393
 (平日11~20時 土11~17時 日祝休 留守電不可)
生徒さんホームページビルダー作成事例はこちら

ホームページビルダー20SPのサイトにスムーズスクロールを入れる実験のときにつかったJavascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><!-- スムーズスクロール部分の記述 --><script>// <![CDATA[
$(function(){
   $('a[href^=#]').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
// ]]></script></pre><div style="position: fixed; right: 20px; bottom: 20px; z-index: 100; background-color: white;"><a style="font-weight: bold; color: blue;" href="#">ページの先頭へ戻る</a></div><pre>