TOPに戻るを簡単に実装する方法(スムーススクロール)

トップに戻るボタンやページ内リンクを押したときに、ゆっくり動きをつける方法です。
コピー＆ペーストで簡単にできるので初心者の方でも設定ができます。

スムーススクロール

スムーススクロールとはよくサイトの右下に上矢印のボタンを押すとしゅるるると上にゆっくりのぼるボタンの
事です。

スムーススクロールを使う方法は基本的にjQueryを使います。
ワードプレスなどプラグインを使用する方法もあります。

今回はjQueryを使って設定する方法を紹介します。

設置場所

基本的にはhead内に設置します。
他のjQueryと競合して動かない場合はfooterに入れる場合もあります。
ワードプレスの場合は、header.php「 」の後に記述してください。

設定コード

設置場所に下記のコードを記述します。

<script>
//スムーズスクロール
jQuery(function(){
   jQuery('a[href^="#"]').click(function() {// # クリック処理
      var speed = 400; //スクロール速度ミリ秒
      var href= jQuery(this).attr("href"); // アンカーの値取
      // 移動先を取得
      var target = jQuery(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;// 移動先を数値で取得
      // スムーススクロール
      jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>

オプション

速度も設定できます。

 var speed = 400; //スクロール速度ミリ秒

オプション

速度も設定できます。

 var speed = 400; //スクロール速度ミリ秒