ショップできすぎくんカスタマイズ裏技講座へようこそ！
2015年6月16日に「ページトップへ戻るボタンを作って見たよ」という記事を書きました。
その記事の最後にjQueryを使い、
最初は矢印画像が表示されない
少しスクロールすると表示される
ゆっくりページトップへ戻るように調整したページをご紹介したところ
http://shop.moshimo.com/black_dekisugi/
この方法教えて！とのお声を頂きましたので、今回は
ページトップへ戻るボタンを作って見たよの続編、jQueryでひと工夫を加える方法を紹介します。
【jQueryって？】
まず初めにjQueryについてざっくり説明すると
クリックしたら画像が入れ替わる
折りたたみ式のメニュー
など、Webサイトに「動きをつける」事が簡単にできます。
もしもでも管理画面ページや商品ページなどでも使われています。
【jQueryの使いかた】
jQueryを利用するには、jQueryライブラリというものが必要になります。
自分のサーバーに保管したjQueryライブラリファイルもしくは、GoogleにホストされているjQueryライブラリファイルいずれかを読み込むためのHTMLコードを記述します。
動きを指定したJava Script（プログラム）を作り、読み込ませる。
このような方法で利用します。
なお、ショップできすぎくんの場合は、Googleにあるファイルを読み込むよう記述されていますのでので、動きを指定したJava Script（プログラム）をご自分のサーバーにアップし、ショップデザイン設定にて指定するだけでOKです。
【ゆっくりページトップへ戻るボタンのレシピ】
2015年6月16日の記事に従って、ページトップへ戻るボタンを追加しますが、その時ちょっと追記する内容が異なります。
今回は以下の赤字の部分も必要になります。
<div style="position: fixed;right: 5px;bottom: 30px; display:none;" id="pagetop"><a href="#container"><img src="http://m.msmstatic.com/000000000/pagetop.png" alt="ページトップへ" title="ページトップへ" align="noassign" width="full"></a></div>
動きを指定したプログラムを作成し、サーバーにアップします。
プログラムは以下の通り、これをメモ帳などにコピペして、「pagetop.js」という名前で保存、ご自分のサーバーにアップください。
ショップできすぎくんのショップデザイン設定→拡張設定にてアップした「pagetop.js」のアドレスを設定し、保存します。
ショップできすぎくんを保存し公開します。これで出来上がりです。
でご紹介したプログラムでは
f ($(this).scrollTop() > 200) ・・・・・トップから２００ピクセル移動すると矢印画像が表示するよう指定。
$('body, html').animate({ scrollTop: 0 }, 500)・・・・・1,000分の500秒（0.5秒）でページトップへ戻るよう指定しています。
好みで数値を調整してください。
【雑記】
あるショッピングサイトで、カートボタンがこの記事で紹介した方法で使われているのを見かけました。
スクロールしてもいつも画面の右下端にあるカートボタン
ず～と付いてくるカートボタン
スマホサイトではカートボタンを探さなくても良いのは助かりますけど、しつこいというか、なんだかね～って印象をうけました
でも、ページのトップに戻るだけでなく、リンク先を変えれば便利なリンクボタンとして使えますので、色々と工夫してみるのも面白そうですね。
では、また
2015年6月16日に「ページトップへ戻るボタンを作って見たよ」という記事を書きました。
その記事の最後にjQueryを使い、
最初は矢印画像が表示されない少しスクロールすると表示されるゆっくりページトップへ戻るhttp://shop.moshimo.com/black_dekisugi/
この方法教えて！とのお声を頂きましたので、今回は
ページトップへ戻るボタンを作って見たよの続編、jQueryでひと工夫を加える方法を紹介します。
【jQueryって？】
まず初めにjQueryについてざっくり説明すると
ライブラリと呼ばれるもので、プログラムについてあまり知識のない者でも、簡単に扱えるように作られたシステムです。
クリックしたら画像が入れ替わる折りたたみ式のメニューなど、Webサイトに「動きをつける」事が簡単にできます。
もしもでも管理画面ページや商品ページなどでも使われています。
【jQueryの使いかた】
jQueryを利用するには、jQueryライブラリというものが必要になります。自分のサーバーに保管したjQueryライブラリファイルもしくは、GoogleにホストされているjQueryライブラリファイルいずれかを読み込むためのHTMLコードを記述します。
動きを指定したJava Script（プログラム）を作り、読み込ませる。このような方法で利用します。
なお、ショップできすぎくんの場合は、Googleにあるファイルを読み込むよう記述されていますのでので、動きを指定したJava Script（プログラム）をご自分のサーバーにアップし、ショップデザイン設定にて指定するだけでOKです。
【ゆっくりページトップへ戻るボタンのレシピ】
2015年6月16日の記事に従って、ページトップへ戻るボタンを追加しますが、その時ちょっと追記する内容が異なります。今回は以下の赤字の部分も必要になります。
<div style="position: fixed;right: 5px;bottom: 30px; display:none;" id="pagetop"><a href="#container"><img src="http://m.msmstatic.com/000000000/pagetop.png" alt="ページトップへ" title="ページトップへ" align="noassign" width="full"></a></div>
動きを指定したプログラムを作成し、サーバーにアップします。プログラムは以下の通り、これをメモ帳などにコピペして、「pagetop.js」という名前で保存、ご自分のサーバーにアップください。
// JavaScript Document
$(document).ready(function() {
var pagetop = $('#pagetop');
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500);
return false;
});
});ショップできすぎくんのショップデザイン設定→拡張設定にてアップした「pagetop.js」のアドレスを設定し、保存します。
ショップできすぎくんを保存し公開します。これで出来上がりです。でご紹介したプログラムではf ($(this).scrollTop() > 200) ・・・・・トップから２００ピクセル移動すると矢印画像が表示するよう指定。
$('body, html').animate({ scrollTop: 0 }, 500)・・・・・1,000分の500秒（0.5秒）でページトップへ戻るよう指定しています。
好みで数値を調整してください。
【雑記】
あるショッピングサイトで、カートボタンがこの記事で紹介した方法で使われているのを見かけました。
スクロールしてもいつも画面の右下端にあるカートボタン
ず～と付いてくるカートボタン
スマホサイトではカートボタンを探さなくても良いのは助かりますけど、しつこいというか、なんだかね～って印象をうけました
でも、ページのトップに戻るだけでなく、リンク先を変えれば便利なリンクボタンとして使えますので、色々と工夫してみるのも面白そうですね。
では、また