*

ウェッブ制作・パソコン

Width =px

ホーム > 変化を付ける小技 >
ページ先頭へスクロールのリンク MENU 

クリックするとページの先頭へスルスルと移動するボタン

最近よく見かける表示で画面の底辺近くにボタンを固定配置し、クリックでページの先頭が表示されます。

1.jQueryライブラリーを読み込む(jQueryを初めて利用する場合)。

記述は、「header.php」に、「< ?php wp_head(); ?> 」の後で、かつ「/head」の間。

注 記述位置は、「wp_head()」の直後

2.ボタンの設置

 以下のhtmlを「header.php」又は「footer.php」に記述します。入れる位置は、「header.php」には:「/header」の前、「footer.php」には、「footer」の先頭が良いかと思います。これは一例で、基本的に位置は、htmlタグの常識的場所ならOKです。

リンク先の名前(アンカー)は、「#top」とすることで、ページ先頭位置に「a name=」は不要です。css3からサポートされました。

3.ボタンのCSS

  • 行番
  • 説 明
  • 2
  • ボタン表示、初期値は非表示
  • 3-5
  • 位置を固定化し、下からと右からの位置を指定
  • 6
  • 最前面に表示する。
  • 8
  • .pagetopにリンク設定
  • 9
  • .pagetop全体が1つのボックスと認識される。これがないと、▲しかリンクされない。
  • 10
  • 背景色をrgbaの色コードの最後を「0.3」で半透明化。数値が小さいほど透明度が上がる。
  • 11-17
  • 好みに合わせて設定下さい。
  • 20-
  • ボタンにマウスを重ねたときの設定です、上記9-17と同じように記述。

スマホ・タブレット用にボタンを小さくしたい場合、以下のCSS

4.ページ先頭へのスクロール・jQuery

  • 行番
  • 説 明
  • 1
  • htmlを全て読み込んだら実行
  • 2
  • クラス名「.pagetop」(ボタン)の要素をbuttonという名で定義した領域に入れる
  • 3-7
  • 見ているページの先頭が上から100px以上になった時、ボタンをフェードイン(ゆっくり表示)し、以外はフェードアウト(ゆっくり消える) ※
  • 8-10
  • ボタンがクリックされたら、ページの先頭までスクロールしながら表示。数値1000はミリ秒で→1秒、数値が少ないと早く、多いとゆっくり。

※ 現在見ている画面の一番上が、そのページの最上部から何ピクセル離れているか。