お手軽な『ページ上部へ戻る』方法
今回のテンプレートはどのページでもメニューが上に表示されるため、ページ上部へのリンクをページの下部つけておくと操作性が良くなると思います。なお、このテンプレートに限ったことではないので、どんなページにだって使えます。
この『シンプル擬似フレーム』テンプレートでは３の方法を設定しています。
▼方法１
<a href="#">ページトップへ戻る</a>
ページ下部にこのリンクタグを貼るだけ！ です。リンク文字は自由に変えて下さい。
▼方法２
ページを包括する（包み込む）、または一番上にあるDIV要素などに名前をつける。
<div id="waku">〜〜内容
ページ下部↓
<a href="#waku">ページトップへ戻る</a>
▼方法３
HEAD・HTML詳細内、BODYタグ↓
<body id="top">
ページ下部↓
<a href="#top">ページトップへ戻る</a>
※注意点※
『id="○○"』と『href="#○○"』に入る名前は半角英数字であれば何でもＯＫですが、必ず同じ名前でなくてはいけません。
１の方法は、同じページ内で一度使ってしまうと二度目は使えません。２、３の方法は何度も使えます。
同じページ内で何度も一番上に戻ることははそうそうないと思うので、１が一番楽な方法かなーと思います。
２の方法は、<div class="waku">など、クラス指定してある場合は使えません。
３の方法は、CSS内で背景色や文字色、リンク色を指定しないと、色設定でナノさんが自動で入れてくれる設定を消してしまうので、色設定が効かなくなります（色未設定時の初期状態になる）。ご注意下さい。
当テンプレートをお使いの方は、『<body>』となっている部分を『<body id="○○">』にするだけでＯＫです。
なお、通常ページトップへ戻る場合一瞬で上まで戻ってしまうのですが、
PCとスマートフォンではjQuery（JavaScript）を使えばふわっ〜とスクロールして戻ることが出来ます。
興味がある方は、一般的な検索サイトで『スムーズスクロール』と検索してみてください。記述も短いのでわりと簡単です。
*カテゴリ2
（2014/02/08 20:41）※0
（2014/02/08 20:41）※0
prev / next
(Back-HOME)