明日なんてものははなからないのにね
どうも僕です。
僕が普段利用している……かどうかは怪しいですがドットインストールという学習サイトでページの先頭へジャンプする機能が公開されていたので学習してみました。
こちらの講座となります。
http://dotinstall.com/lessons/scroll_js
この機能を実装するとちょうど僕のブログの右下あたりにでてくる[トップへ]ボタンのような機能が作れます。
こんな風にね。
実は大分昔に実装していたんだけど誰も見てないブログだから宣伝も兼ねてやっています。スマホやタブレットだとトップへが出てくると煩わしいだけだから非表示にしてたりするよ。普段紹介しているクソみたいなミニプログラムよりは気を使っています。
それではおまちかねのクソみたいなミニプログラムです
学習内容を利用するとこんなのが作れるようになるよ。
上の画像からスクロールをすると下の画像が延々と表示されるページです。
appendメソッドを追加することによって無限にスクロールできるようになりました。あまりにも不要すぎる機能だね。さらに言うといつものごとく細かい処理は雑だよ。
以下、ソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <title>ザ・シンプルシリーズ 無限回廊</title> <style type="text/css"> body{ text-align: center; color: red; background: black; } a{ color: purple; } </style> </head> <body> <h1>絶対に覗いてはいけません</h1> <div class="endlessText"></div> <div style="height:900px"></div> <a>見ましたね</a> <div id="pos" style="position:fixed; left: 5px; bottom: 5px"></div> <div id="backToTop" style="position:fixed; right: 5px; bottom: 5px"><a href="#">[TOP]</a></div> <script> $(function(){ // 非表示 $('#background').hide(); // 表示処理 $(window).scroll(function(){ $('#pos').text($(this).scrollTop()); // 無限テキスト $('.endlessText').append('<div style="height:200px"><p>ここから先は見ては行けない</p></div>'); if($(this).scrollTop() > 60){ $('#backToTop').fadeIn(); }else{ $('#backToTop').fadeOut(); } }); // スクロール処理 $('#backToTop a').click(function(){ $('body').animate({ scrollTop: 0 }, 500); return false; }); }); </script> </body> </html>
おわりに
つらつらと書きなぐりましたが、このブログではトップへジャンプする機能が付いているんだよということを伝えたかっただけの記事です。ここまで読んでくださってありがとうございます。
もし、こんな機能があったら利用しやすいなどあればコメントよろしくお願いします。なお、なくても良い機能は随時つけていこうと思います。