どもです＾＾

お久振りで御座いました＾＾
今ね、今まで、、ちょっとだけ気になっていた、、

此方 ⇒ 『 一番下から、一番上に戻るボタンにアニメ~ションを付ける。』 をね、
この度、新たに挑戦致しました＾＾ぐふふ。

通常のTOPに戻るボタンは、一気にTOPに戻ると言う表現よりも、
● ⇒ 『 一気にTOPペ~ジを表示する。』 と いった
ニュアンスと言うか、、、そういった感じですが、

私が今回ちょっとだけ苦労してこしらえたTOPに戻るボタンは、
一番下から、一番上に戻るとき、、アニメ〜ションのように、

ギュンギュン〜〜〜ンっと、スクロ〜ルバ〜が自動で動いて伸びるように
下から上に向かって走るような動きを付けたボタンである＾＾

最近よくサイトで右下辺りに表示され、見かけるTOPに戻る
ボタンの事である。。

他のサイトは、、大体、、、画面を下にスクロ〜ルさせると、、
自然にＴＯＰに戻るボタンを ⇒ 『 表示する仕組み 』 で、基本的には、

TAGの ⇒ 『 button 』 と 言うものを使用してると思いますが、、
私、、このbuttonのTAG好きじゃないので、だってね、デザインも決まっていて、

単調なデザインで、好き勝手に自由自在に弄られないので、、なので、、
私は、他のサイトでは、、、多分ない＾＾；汗・・・と思うが、、、

あっはっは＾＾

この、TAG ⇒ 『 button 』 を ⇒ 『 IMG 』 に 画像のTAGに変更して、
自分の好きな感じに弄りまして、作り変えてしまいました＾＾

これまた、少し骨が折れましたが、出来ましたよ＾＾ふふふ。
私が作ったのは、思ったよりかは、、簡単では無いが、、骨も折れたしね。。
少しだけね。。

でも、然しながら、、出来ない〜無理だ〜の、、世界にはならなかったです＾＾
ほうほう〜私、、デブおっさん＾＾レベルUPした＾＾って感じです。

ああ、、ごめんなさい。。話し飛んだね＾＾ぐふふ。
では、話しの続き、、そうそう〜他のサイトにはないと思うが、、
こういった感じの物を作りました。

● ⇒ 『 一番下の階層に、最初っからTOPに戻るボタンを表示している。』 で、
あります。そして、⇒ 『 button部品TAGではなく 』 ⇒ 『 画像TAG 』 を、

使用している。で、あります。また、その他イベントとして、
ボタンに触れると、ロ〜ルオ〜バ〜して、ボタンの矢印が赤色に

光るように演出し、更に、代替えテキスト領域も出て、
更に 更に、音源も鳴る様に作りました。。

＾＾あ、そうそう、このボタン、、

通常は、、基本的には、あの、⇒『 jQuery 』 ジェイクエリ 〜 は、
使わず、って言うか、
嫌いだから、使わないけど＾＾；汗・・・あはは＾＾

今回は ⇒ 『 JAVA SCRIPT 』 で、実現しました＾＾
って言うか、、jQuery は、Java Script の ライブラリ なのですが、

どうも、、肌に合わない。。。Java Scriptだと、、10行打つTAGが、、
jQuery は、簡単で、3行くらいで、完結するみたいですが、、

どう〜も、、、すかん＾＾；汗・・・

嫌いなのよ＾＾色々出来るのにね。。jQueryだとね。。
ま、いいのです。これで＾＾ふふふ。

ってな事で、、、って、、ここまで話しちゃいましたが、、、
話しの途中で一部変更がありまして、、＾＾；汗・・・あはは＾＾

ちょっと、、このままでは、、TOPに戻るアニメ〜ションボタンを、
一番下に表示するだけでは、、物足りなく、、しかも、、このままだと、、

駄目だという事に気が付きまして、、

再度見直しを掛け、、
一番下に表示してあるTOPに戻るアニメ〜ションボタンは、
そのまま、表示しておいて、、

その他、独り言を読んでいる途中でも、、或いは、
中階層まで、、スクロ〜ルして、、途中で、一番上に戻りたい場合を、

想定して、新たに、ペ〜ジの右横の端っこに、
TOPに戻るアニメ〜ションボタンを、実装することに決めまして、
私の精神状態も、、体調も良かったもんですから、、、

一気に、、またまた、やり遂げてしましました＾＾ぐふふ。
やはり、、色々考えてみて、、やはり、、他のサイト様を観ると、

ペ〜ジを下にスクロ〜ルすると、、、TOPに戻るアニメ〜ションボタンを、
表示して、、どの階層に居ても、、、途中で、一番上に戻れるように。。

ペ〜ジをスクロ〜ルする度、、その、TOPに戻るアニメ〜ションボタンも
一緒について来るようになっているのですが、、、今考えると、、

ちゃんと、意味があったんだなぁ〜的に思いました。学びましたよ＾＾
ま、取り合えず、他のサイト様のように、ペ〜ジの右端に、

TOPに戻るアニメ〜ションボタンを実装するだけでは、他のサイト様と、
なんら、、変わりないし、、面白くないので、

私なりに、、抵抗 and 反抗してみました＾＾あっはっは。
なので、他のサイト様には無い、、当サイトにしかない、

こんな、、TOPに戻るアニメ〜ションボタン、、観た事無い凄い的な事を、
コンセプトに頑張りました＾＾ふふふ。

色々なイベント満載のTOPに戻るアニメ〜ションボタンを、
私は作りましたよ＾＾内容は、、、此方、、

● A タイプのTOPに戻るアニメ〜ションボタン。

�@ 一番下にTOPに戻るボタンを表示しました。

�A ボタンをクリックすると、一番上まで、ギュ〜ンっと一気に画面が走るように、
　　ペ〜ジがスクロ〜ルして一番上に戻ります＾＾
　　下記、記載 B タイプと違い、一定スピ〜ドで、一気に減速する事もなく、
　　一気に一番上までペ〜ジが走り抜けます。そして、一番上に到達すると、
　　スパっと、止まります＾＾また、ボタンを押して、ペ〜ジが走っている途中で、
　　ペ〜ジの画面を ⇒ 『 クリックしながら文字をドラッグ 』 すると、、
　　クリックした場所に、ペ〜ジが止まります。

�B ボタンに触れると音源がなります。

�C ボタンに触れると矢印の中の色が赤くなります。
　　OVER型のロ〜ルオ〜バ〜と、言います。

�D 代替えテキスト領域を表示致します。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

● B タイプのTOPに戻るアニメ〜ションボタン。

�@ ペ〜ジ画面を下にスクロ〜ルすると、TOPに戻るアニメ〜ションボタンを
　　ペ〜ジ画面の右側の中央の端にフワッと、、表示致します。
　　また、一番下の再開層に到達しても、、、
　　画面をスクロ〜ルしてる間も消える事はありません。
　　ペ〜ジスクロ〜ルする度、その、TOPに戻るアニメ〜ションボタンは、
　　一緒に付いて回ります＾＾なので、どの階層でも、、途中から、
　　一番上に何時でも好きな時に戻れます。また、ペ〜ジが走っている
　　途中で、ペ〜ジの中を ⇒ 『 クリックしながら文字をドラッグ』 しても、
　　ペ〜ジは止まる事なく、一番上に到達するまで走り続けます。

�A クリックすると、一番上まで、ギュ〜ンっと一気に画面が走るように、
　　ペ〜ジがスクロ〜ルして一番上に戻ります。と、同時に、
　　TOPに戻るアニメ〜ションボタンはフワッと消えます＾＾
　　此方のボタンは上記載 A タイプと違って、一番上に戻る時の
　　走り方がギュ〜ンと、、一気に上まで走って、一番上に近づくにつれ、、
　　途中で減速し、、まるで、、ブレ〜キを掛けるように、
　　徐々にスピ〜ドが遅くなり、、ペ〜ジが走ります。そして、
　　一番上に到達すると、ゆっくりと、、止まります。

�B クリックすると音源がなります。

�C ボタンを押すと矢印の中の色が黄色くなります。
　　DOWN型のロ〜ルオ〜バ〜と、言います。

�D　代替えテキスト領域を表示致します。

以上です＾＾

良かったら、試しに押してみて下さいな＾＾
私が作った。。TOPに戻るアニメ〜ションボタン＾＾

ああぁ、、それと、、、上部に観える、、GOODボタンとBADボタンも、
押してみて下さい＾＾；汗・・・あっはっは＾＾

因みに、TOPにアニメ~ション付けて戻るボタンが実装してある場所は
此方 ⇒ 『 SOLILOQUY コルミの独り言。』 に、あるよ＾＾ふふふ。

それでは、色々と、お願い申し上げます＾＾では、また。