JQueryを使ってページトップになめらかに戻る方法

公開日 : 最終更新日 :

カテゴリー :

ブログなどでページをスクロールしていってページトップに戻りたい場合は、アンカーリンクを設置すれば出来ます。ただアンカーリンクを設置しただけでは、ページを変えたみたいにトップページに移動するのですが、JQueryを使えばスクロールしてトップページに戻ることが出来ます。今回は、Bloggerでなめらかにトップページにスクロール方法を紹介します。

JQueryのコードを編集

まずは、JQueryを埋め込みます。埋め込む方法は「BloggerでJQueryを使う方法」をご覧ください。JQueryを埋め込んだらJQueryのコードを入れます。手順は以下の通りです。

  1. 「テンプレート」→「HTMLの編集」をクリック
  2. 「続行」ボタンをクリック
  3. 以下のコードを埋め込む
  4. 「テンプレートを保存」ボタンをクリック
  5. 完了

これでJQueryは完了です。JQueryコードの4行目の「400」はスクロールする速さになります。なので早くしたい場合は、数字を小さく、遅くしたい場合は数字を早くするといいです。数字以外にもいろいろとオプションを使うことが出来ます。こちらを参考に400を変えてください。

HTMLの編集

次にHTMLコードを追加します。手順は以下の通りです。

  1. 「レイアウト」→「ガジェットの追加」をクリック
  2. 「HTML/Javascript」を選択
  3. コンテンツに以下のコードを挿入
  4. 「保存」ボタンをクリック
  5. 完了

空白部分にスクロールを出す

これでHTMLのコードを追加は完了です。これでなめらかにページトップにスクロールすることが出来ます。このシステムを応用して前にやったページの空白部分に出したり出来ます。参考にコードを紹介します。以下のそのコードです。JQueryとCSSは「HTMLの編集」でHTMLはレイアウトの「HTML/Javascript」で行うと楽だと思います。

JQuery

CSS

HTML

参考

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>