上に戻るボタンの設置方法

 
トップページ はじめに 作成実績 スマホテンプレート ネットで収入を得る
 
 

スマホサイトに「上に戻る」ボタンを設置する方法

 

スマホサイトは、スマホの画面サイズが小さいため、どうしても、縦に長くなってしまう傾向があります。 そのため、すぐにページ上部に戻ることができるように、スマホサイトには、「上に戻るボタン」を設置したほうが良いです。

「上に戻るボタン」を設置することで、スマホサイトを見ている人は、すぐにページの上部に移動することができるため、使いやすくなるからです。 「上に戻るボタン」は、設置して損はないので、できれば、設置するようにしましょう。


なお、「ページの上部に戻る」という形で、リンクを貼るだけという方法もあるのですが、これだと、 ページが瞬間移動する(ページが切り替わって、上部に移動する)ため、少し分かりづらいのですよね。。。

そこで、今、流行り?の「jQuery」を使って、ページ上部に、ゆっくりと移動する方法をお伝えしたいと思います。 この方法なら、「ページ上部に移動している!」ということが、視覚的に分かるので、人はとても分かりやすいはずですよ。




【手順1】スマホサイトのヘッダーに「jQuery」のソースを入れる

まず、スマホサイトのヘッダー部分(<head>から</head>の中)に、下記のソースを入れてあげます。


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.crunchify-top').fadeIn(duration);
} else {
jQuery('.crunchify-top').fadeOut(duration);
}
});

jQuery('.crunchify-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

「jQuery」の宣言になるので、このソースを入れてあげましょう。
(すべてのHTMLファイルのヘッダー部分に入れます)




【手順2】スタイルシートのファイルを修正する

次に、スタイルシートのファイル(style.css)に、下記のソースを入れてあげます。


.crunchify-top:hover {
color: #fff !important;
background-color: #ed702b;
text-decoration: none;
}

.crunchify-top {
display: none;
position: fixed;
bottom: 1rem;
right: 1rem;
width: 3.2rem;
height: 3.2rem;
line-height: 3.2rem;
font-size: 1.4rem;
color: #fff;
background-color: rgba(0,0,0,0.3);
text-decoration: none;
border-radius: 3.2rem;
text-align: center;
cursor: pointer;
}

これも、そのまま入れてあげるだけでOKです。




【手順3】スマホサイトのフッターに、上に戻るボタンを設置する

最後に、スマホサイトのフッターに、下記のソースを入れてあげます。 なお、下記のソースは、</body>タグの上に、入れてあげればよいですよ。


<a href="#" class="crunchify-top">↑</a>

これも、そのまま入れてあげるだけでOKです。




まとめ

上記の【手順1】から【手順3】を実施するだけで、スマホサイトに、「上に戻るボタン」が表示されます。 確認作業として、スマホサイトにアクセスをして、「上に戻るボタン」が設置されて、上に戻れるかどうかを確認してみてください。

スマホサイトには、このようなボタンがあったほうが、人は使いやすくなるので、ぜひ参考にしてくださいね。


【参考URL】
http://tech.mirukome.com/gototop_button/




 

 
ホームページの作り方
 
動画で覚える無料ホームページ制作講座
 
ホームページの作り方を、動画で見ながら覚えることができる 無料の講座 です。

インターネットを使ったサイドビジネスで収入を得るためには、 「ホームページを自分で作れること」 が必要になるので、このサイトが役に立ちます。
 
 
HPテンプレート
 
自分で更新できる最短ホームページテンプレート
 
初心者が、簡単にホームページを作るための 「ホームページテンプレート」 です。

なお、スマホテンプレートがセットになっているプランもあります。
 
収入を得る最短コース
 
会員制サイドビジネス講座
 
インターネットを使って、 月20万円の収入を得るために、 必要な知識と技術 を身につけることができる、会員制のサイドビジネス講座です。

これが、インターネットを使ったサイドビジネスで、 収入を得るための最短コース になります。
 
当サイトの運営者
 
インターネット副業 運営者プロフィール
 
 
NPO法人 推薦状
 
NPO法人からの推薦
 
NPO法人「起業とキャリア支援センター」様からの推薦を受けて、運営しています。