JavaScript と CSS のみでページトップへ戻るボタンを作ってみた件

ページトップ.png



このサイトも随分記事数が増え、今日は254記事目・・スマホで観ると10記事表示にしているので右カラムまで表示すると随分長いページになっている・・そう!トップに戻るのにかなり苦労する・・



トップに戻るボタン設置に5時間も掛かった




今までseesaaブログのカスタマイズにはWEB上の情報を利用させてもらっていた・・使えない場合も多かったがある程度内容通りにカスタマイズできたが、今回のトップページへ戻るボタンはメチャクチャ苦労してしまった・・問題は、今までカスタマイズしてJavaScriptなども多用しておりCSSの記入位置によって干渉してしまう様だ・・



実際先日、シーサーブログの機能変更が原因かスマホの表示が崩れてしまいなおすのに数時間かかった・・さんざん探した結果、今回は下記のサイトの情報を使わせてもらった・・
『WordPress jQuery などの Web 制作関連のメモと iPhone Macのこと』



その前にWEBで検索していくつか試してみたが全く設置できない・・ほとんどが『 jQuery 』というものを利用していて、これがどう設置しても動かないし表示さえできない・・最後に行きついたのが上記のサイトで「JavaScript と CSS のみでページトップへ戻るボタンを設置する」という内容だった・・



調べてみたところ「JavaScript」は Webページに動きをつけるのに用いる言語で「 jQuery」はJavaScriptを少ない記述で書ける」ようにする物だそうで本来、こちらが簡単なのだろう、どのサイトもスゴク簡単に設置できるように書いてあった・・



だが今回どんなに頑張っても実装できず、最後のこのサイトを参考にしても最初はうまく行かなかった・・



最終的に紹介されていたCSSを記入する位置を少しずつづらして実際ページを確認しながらボタンが実装できる位置を探し出し設置させてもらった・・具体的なコードについてはページ管理者のものなので上記サイト名をクリックして確認してほしい・・



結果、実装完了まで5時間もかかってしまった・・実際はもっと勉強すべきなのだが、すべて他サイトを参考にさせてもらい今、ブログを作り上げているので、まずはしっかりしたサイトが作れて収益が上がってから詳しく勉強しようと思っている・・



ただ、一つづつ問題解決することでもかなり勉強になっていて一年前より知識はすごく増えた・・自力で稼げるようになることが最優先なのでまずは現実重視で成果を上げる事に全力を注ぎたい・・




ブログランキング・にほんブログ村へ
にほんブログ村

インターネット・コンピュータ ブログランキングへ
アクセスランキング

タイトルとURLをコピーしました