noramemo

どうも！ブログ連載4日目でやりきった感満載のnoramasaです！
いやはや…毎日更新するのはなんて大変なんでしょう！
なんとか3日坊主で終わらずに済みましたが、4日坊主で終わる可能性も大いに有りですねｗｗｗ

さて、先日の記事でも書かせていただいたとおり、Wordpressのプラグインで「WP To Top」というものを使ってみました。
ページスクロールが長い場合でも、スルスルーっとページの一番上に移動してくれるリンクが設置できるプラグインですね。
Worepressはプラグインで簡単設置できましたが、jQueryでも簡単に設置できるスクリプトがあるのでご紹介！

• 

●実装・設定方法

jQuery Scroll to Top Controlのサイトからデータをダウンロードします。
HTMLへの記述例はこんな感じ。
※全体はDEMOをご確認ください。

・・・ほにょほにょ・・・

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="scrolltopcontrol.js"></script>

・・・ほにょほにょ・・・

●カスタマイズ・オプションなど

正直なところ、カスタマイズというカスタマイズは…そんなにないですｗ
リンクの位置とリンクとなるボタン画像を変更するくらいで十分じゃないかと。
ボタン画像の変更は「scrolltopcontrol.js」を下記ように12行目のimgタグ部分を書き換えればOKです。
※説明しやすいように改行してますのでご注意ください。

・・・ほにょほにょ・・・

setting: {				//おそらく11行目！
	startline:100,			// リンクが表示されるスクロール位置
	scrollto: 0,			// それ…僕に聞くのかい(´･_･`)
	scrollduration:5000,		// 移動するのにかかる時間（例：5000なら5秒かけて移動）
	fadeduration:[1000, 500]	// リンクが表示される時のフェードの時間（例：1秒かけて表示し、0.5秒かけて消える）
}, 
controlHTML: '<img src="img/btn_pagetop.png" style="width:150px; height:35px">', //おそらく12行目！
controlattrs: {				//おそらく13行目！
	offsetx:15,			// リンクが表示されるウインドウ右からの距離
	offsety:15			// リンクが表示されるウインドウ下からの距離
}, 

・・・ほにょほにょ・・・

●まとめ

このスクリプトは、同じ会社のスタッフの
「プログラムという名の音楽を奏でるプロ（グラム）ギタリスト・Oさん」から教えてもらいました！
さすがプロですぜ(｀・ω・´)！
ちなみにここだけの話…Oさんは腹筋が8つに割れているそうです(∩´∀｀)∩ｽｺﾞｰｲ！ｷｬｯｷｬｯ！

適度に脱線しましたが、
便利な上に簡単に実装できるので、お仕事では基本オプション的な扱いで、新規のウェブサイト製作の際は必ず実装するようにしてます。
その他お決まりのパターンとしてはLightBox系ですかね？スライダーやカルーセルなんかもよく使ってます！

本当にどんどん新しい技術が出てきますね。数ヶ月前は最先端と言えたものが、今では当たり前の技術になっていたりします。
ふと我に返った時、「本当は周りに大きく差が開いてて、置いていかれてるんじゃ…」という気持ちになります。
ナイスネガティブ！でも開いてしまったものは仕方ないので一つずつ差を埋めてければ十分ですね♪
次の目標はブログ毎日更新1週間！がんばって習慣付けるのだ(｀・ω・´)ｵｰ！

>>>デモ版はこちらからご確認ください。