Home > FC2ブログ > basic_white > basic_whiteテンプレート ページ上部に移動するボタンの色・位置・速度変更

basic_whiteテンプレート ページ上部に移動するボタンの色・位置・速度変更

 basic_whiteテンプレートの右下に固定表示されているページトップに移動するボタン(リンク)の色や位置、速度を変更する方法です。

 表示したくない時はボタン部分をHTMLから削除します。

スタイルシートのサンプル

 色を選択して下のコードをコピー&変更場所に上書き貼り付けしてください。「右端に寄せる」をチェックするとウインドウの右端にくっつくようにして配置されます。

変更場所:スタイルシート

 変更場所はCtrl+Fキーで『fixed』を検索。以下の部分を上書きします。

#pagetop {
  position: fixed;
  right:200px;
  bottom:50px;
  z-index: 100;
}
#pagetop a {
  display: block;
  width: 58px;
  height: 58px;
  background: #EEEEEE url(http://blog-imgs-43.fc2.com/t/e/m/templates/page_top.png) no-repeat 13px 13px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  opacity: 0.7;
  filter: alpha(opacity=70);
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#pagetop a:hover {
  opacity: 1;
  background-position:13px -48px;
}

 サンプルのコードをそのまま利用する場合は上記部分を丸ごと上書きしてください。「位置の調整」と「背景色の変更」は不要です。

位置の調整

 「right:数字px;」「bottom:数字px;」の数字を変更すると位置が変わります。

#pagetop {
  position: fixed;
  right:50px; /* 右端からの距離 */
  bottom:30px; /* 下からの距離 */

 上記のように変更すると右から50px、下から30pxの位置に表示されます。

背景色の変更

 「background: #●●●●●●」の値を変更すると色が変わります。

background: #●●●●●● url(http://blog-imgs-43.fc2.com/t/e/m/templates/page_top.png) no-repeat 13px 13px;

 元のコードにある「background-position:13px -48px;」を削除するとカーソルを重ね合わせても矢印の色が変わらなくなります。

 サンプルでスタイルを作成した場合は「background-color: #●●●●●●」の値がカーソルを重ね合わせた時の背景色になります。

ページ上部に移動する時の速度を速くする

HTML

 場所はCtrl+Fキーで『scrollTop』を検索。

jQuery( "#pagetop" ).click(function() {
  jQuery("body, html").animate({scrollTop: 0}, 800);
  return false;
});

 「800」の数値を「400」などに減らすとページ上部に速く移動します。逆に増やせばゆっくり移動します。数値には半角数字を指定してください。

移動ボタンを削除する

HTML

 場所はCtrl+Fキーで『template_go_top』を検索。

<div id="pagetop"><a href="#container" title="<%template_go_top>"><%template_go_top></a></div>

 上記を丸ごと削除してください。

関連記事
スポンサー リンク
コメント
#89 : No title
素晴らしい方法ありがとうございます!

前からこの部分気になってたんで便乗質問で恐縮なんですが、これを上だけではなく下に移動しするボタンや、トップページに移動するボタンを作ることも可能でしょうか?

記事本文の左に持ってきたい場合は、1200pxぐらいにすればナントカできました。
#90 : ページ移動
コンニチハ。
フッターへの移動リンクは別に記事を作成中ですのでお待ちくださいませ。
ご要望が多くある場合は一度ウェブ制作のサイト等で調べてから、それでもわからない時にご相談くださると助かります。
適当に紹介していく運営方針ですのでご了承くださいm(_ _)m
#91 : No title
急かすような真似をしてスイマセン(;´∀`)
勉強しながら気長に待ってますm(_ _)m
#92 : ページ移動2
コンバンハ。
お待たせしました。
URL先に投稿しました。
不具合がある場合はURL先にてご報告くださいませ。

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered