ホームぺージ制作印刷物

歯医者さんのバナー

ホームぺージ制作

歯医者さんのホームページにイベントのバナーを追加しました。

クリックすると下のお知らせにスクロールするんですが、そのままだと一瞬で移動しちゃってどこに飛んだかわかりづらいので、スルスルっとスムーズにスクロールするように、設定しました。

スムーズスクロールはとってもシンプルなのを見つけたので、しばらくこれで行こうと思います♪

<script>
$(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>

jquery読み込んだ後に上記をコピペすればOK

引用元:http://kyasper.com/jquery-tips/

 

 

    この記事を元に問い合わせる








    ※確認画面は出ません。そのまま送信されますので、よくご確認の上送信ボタンを押してください。

    ※不具合などで送れない場合は、お手数ですが info@nagakute-design.comまたは090-6363-6760(深谷)まで連絡下さい。