情報商材 レビュー

ネットで稼ぐ情報商材レビューブログ > 70 便利な小技 > 01_MovableType

ページトップにぬるぬるっとスクロールするボタンを表示する方法

ページトップにぬるぬるっとスクロールするボタンを表示する方法

2014-01-12_162445.jpg

 

こんにちは。ヲタスケです。

 

さっそくですが、このページを表示してすすっと下にスクロールしてみてください。

↓↓↓

 

http://johosyori.com/sitemap.html

 

「はい!」

右下にこんなボタンが表示されましたね?

scrollup.png

このボタンをクリックするとぬるっとページトップに移動します。

2014-01-12_142238.jpg

今回はこの「ページトップスクロールボタン」の設置方法について紹介します。

縦長にだらっと長い文章(特にブログ記事)を書く人には必見の内容ですよ!

 

ページトップスクロールボタンはどういった技術で実現できるのか?

 

この技術はJavaScriptを使って実現しますが、
このJavaScriptで書かれた便利な関数ライブラリ群である、jQuery(ジェイクエリー)を使います。

 

※jQueryとは

jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる

引用元:http://ja.wikipedia.org/wiki/JQuery

 

で、JQueryを使ってトップにスクロールするスクリプトがscrolltopcontrol.jsです。

 

一昔前であれば、こういったスクリプトは自分たちで独自にプログラミングしなければなりませんでしが、
こんなに複雑なプログラムが無料で公開されるのですから、
本当に便利な世の中になりました。

 

というわけで、せっかく無償提供されているのですから
遠慮なく使わせていただきましょう。

 

jQueryとscrolltopcontrol.js及びボタン画像を公式サイトよりダウンロードする

 

jQueryのダウンロード

 

まず、jQueryを公式サイトからダウンロードします。

jQueryは下記サイトから取得します。

http://jQuery.com/download/

 

2014-01-12_212634.jpg

 

「Download the compressed, production jQuery 1.XX.X」のリンクがありますので、
このリンクを右クリックして、「名前をつけて保存」で名前を変えずにPCのデスクトップ等に保存します。

 

scrolltopcontrol.jsのダウンロード

 

次に本体であるスクリプトと画像をダウンロードします。

下記URLから取得します。

http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm

 

ページ中盤にある、スクリプトリンクと画像をそれぞれ右クリックして、
「名前をつけて保存」で名前を変えずにPCのデスクトップ等に保存します。

2014-01-12_142637.jpg

 

jQuery、scrolltopcontrol.js、ボタン画像を自分のサーバーにアップロードする

 

さて、必要な材料は揃いましたので、
次に資材をサーバーにアップロードしていきます。

今回はJavaScriptをアップロードするので、
サーバーに予め「js」というフォルダを作っておきます。

そして、そのフォルダにアップロードします。

私はXサーバーを使っていますので、public_htmlの下に「js」というフォルダを作りました。

 

2014-01-12_142412.jpg

そこに、先ほどデスクトップに保存した3つのファイル(jsファイル2つ+ボタン画像1つ)をアップロードします。

 

スクロールボタンを表示したいページのトップにソースを追加する

 

最後に先ほどアップロードしたスクリプトファイルをページで読み込ませるように
HTMLを編集します。

編集の仕方は読み込ませたいHTMLファイルの<head>タグ内(<head>~</head>の間)に
以下の2行を追加します。

 

<script type="text/javascript" src="http://johosyori.com/js/jQuery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://johosyori.com/js/scrolltopcontrol.js"></script> 

 

※http://~の部分は実際にjsファイルをアップロードした場所に変更してください。

「jQuery-1.10.2.min.js」はダウンロードしたバージョンに合わせて変更してください。

 

2014-01-12_142329.jpg

 

お疲れ様でした!設置作業はこれで完了です。

 

scrolltopcontrol.jsをどのページに追加すべきか

 

と、ここまでボタン設置方法を紹介してきましたが、
当ブログでは情報商材アフィリエイトで稼ぐ方法として、
「ページトップスクロールボタンをどういったページに設置すべきか?」
ということまで踏み込んでお伝えしようと思います。

 

まず、前提として、
設置するページが「情報提供型ページ」なのか「商材販売(セールス)ページ」なのかを
考えてください。

 

つまり、ページトップに移動させることができる、というのは
あくまでもユーザビリティ(操作性)の向上施策の一環であって、
「商品をご購入頂く」という行為とは何の関連性もないのです。

 

ですから、例えばセールスページには設置しないでください。

 

セールスページとは、縦長のサイドバーなしの商品販売ページですが、
このページのランディングポイント(着地点)は決済ボタンのクリックですよね?

 

だから、それ以外のボタン/リンクはクリックさせてはいけません。

 

このようなセールスページにページトップスクロールボタンを配置したらどうなるでしょうか?

 

せっかくキャッチコピー→サブコピー→ボディコピー・・・と繋げてきて、
最後に決済リンクをクリックしてもらう・・・という段階に来て、
ページトップに戻るリンクを押されてしまったら・・・・

 

全ての工程が水の泡です。

 

こういった余計な作業がページ離脱率を高めてしまうのです。

 

なので、このページトップスクロールボタンを配置する際には
設置するページの属性をよく考えてからにしてください。

 

以下、当ブログへの適用方針ですが・・・・

 

当ブログでは、ページ自体が縦長にならないランキングページには設置していませんが、
異様にページが長い記事一覧や情報提供をメインとした個別記事(今読んでいただいているこのページ)には
問答無用でページトップスクロールボタンを設置しました。

 

ご参考にして頂けますと幸いです。

 

本日も最後までお付き合いいただきありがとうございました。

 

情報商材アフィリNo.1

アンリミテッドアフィリエイト  アンリミテッドアフィリエイト

アンリミレビュー記事

人気ブログランキング参加中

この記事が役に立ったと思ったら、 ボタンをポチっとクリックしてください!

↓↓↓

人気ブログランキング

↑↑↑

応援よろしくお願いします。

お問い合わせはコチラ

メールフォーム

不明点、質問、何でもご相談ください。

↓↓↓

>>ヲタスケに質問する<<


◇ツイッターで
ヲタスケをフォローすることで、最新の更新記事をリアルタイムで読むことができます!

↓↓↓


情報商材rss