JavaScriptでのページ内スクロールとDOCTYPE宣言でハマった話IT系おじさんのチラシの裏2018年10月~プロフィールAUTHOR:とっちら書きたくなったときに書きたいことを書く雑記ブログ。IT系のネタが多いかも知れません。11:57とっちら1年前の記事に助けられました。14:28とっちらこの記事のお陰で60分録画できるようになりました。16:01とっちらライセンスを明示して貰えると使いやすいのですが。14:37ご回答いただきどうもありがとうございます。21:56とっちら超初心者です。)ページ内のスクロール処理、例えば[上へ]ボタンや[下へ]ボタンは様々なWebサイトで見られますが、実装方法はいろいろと異なりますし、特定の要素を指定したスクロールについては少しややこしいので、そのあたりの解説を記事にしよう........................と思っていました。その前に基本となるページの最上部および最下部へスクロールする方法についてまとめておこうとサンプルコードを書き始めたら、これがうまく動作せず、解決までに数時間悩むハメになったので、また同じ目に遭わないよう、トラブル事例として記録しておきます。href="#hogehoge">[下へ]</a>のようなアンカーリンクで飛ぶ方法ですね。実際に下記のリンクをクリックするとこの記事の下のほうへ移動します。[下へ]ここはWordPressを使ったブログなので、上のサンプルではページ最下部ではなく、記事の最下部にアンカータグを置いていますが、実際に使うときはテンプレートを書き換えてアンカータグを配置すれば良いでしょう。書くだけでも構いません。ようなアンカータグを用意する必要もありません。これは昔から各ブラウザがそういう独自仕様で動いていたのですが、HTML5以降は標準仕様として決まったため、堂々と使って構いません。いったURLフラグメントが付く問題があります。...いや実際には問題どころか、それが付くからこそ、ページ内のここを見て!と#付きのURLを送れる利点も大きいのですが、Webシステムにおいて自前でURLの解析をしていたり、はたまた(ページリロードを伴わずに)動的にIDが動く場合など、#を付けずにページ内移動したいなぁ~というケースもあるんですね。いうケースではJavaScriptを使って↓こんな感じでスクロールさせます。>[上へ]</a>■実行例[上へ]どうでしょう。消してからお試しください。関数では飛び先のX座標、Y座標を指定する必要がありました。ページの最上部ならX座標0、Y座標0で固定なため簡単でしたが、最下部となるとちょっと話が変わってきます。>[下へ]</a>アレコレ小難しいことを考えるのが面倒な人向け。実際ぼくもちょっとしたテストサイトならコレで済ませることもあります。Y座標が実際のページより大きい分には勝手にブラウザが最大値で止めてくれるので、10000とか指定しちゃう。■実行例[下へ]しかし昨今は無限スクロール※を実装したサイトもありますし、10000pxを超えちゃうかも知れません。なんだかそれも気持ち悪い。※無限スクロールに興味がある方はこちらの記事もどうぞ参考記事:JavaScriptで無限スクロールを実装するのはとても簡単(jQuery不要)そんなわけで、マジメな解説サイトではこんな例を出していることが多いのではないでしょうか。y);}</script>documentElementのscrollHeightには(表示されていない部分も含めた)ページ全体の高さが入っています。clientHeightにはウィンドウの高さ、もっと厳密に言うならブラウザで表示している範囲内の高さ、が入っています。うちのような縦長長文のブログで、ページ全体の高さが10000pxくらいあった場合、フルHDサイズのモニターでブラウザを最大(フルスクリーン表示)にしても、せいぜい1080pxまでしか表示できません。このとき、scrollHeightには10000、clientHeightには1080が入っているというわけ。clientHeight)、Y座標8920までスクロールしなさい、としているのです。■実際の値documentElement.scrollHeightdocumentElement.clientHeightPCでこのページを見ている場合はブラウザのウィンドウの高さを変えるたびに上の値が変わるのが確認できるかと思います。・の・で・す・が・・・・DOCTYPEによってdocumentElementの仕様が異なる言い訳ですが、ぼくは業務系のプログラミングが本職で、Web系は趣味でやっているレベルなのでDOCTYPE宣言(ページの最上部に書くアレ)なんておまじない、くらいに考えていました。IE全盛時代に現役バリバリ(死語?)だったため、DOCTYPEはIEの後方互換を保つためのものだろう、と。HTML5になってからは不要だろう、とすら思っていました。実際、HTML5からはSGML文書ではなくなったため、DOCTYPEは不要である、という記述をどこかで見かけて鵜呑みにしてたんですね。自分が作るサイトではDOCTYPEなんて付けてませんでした。記述は必須だったんです。このDOCTYPE宣言がないと、Chromeは後方互換モードで動き、documentElementのscroll関連で返す値が変わります。ページの最大サイズを返してしまうのです。0となり、ページ最下部どころか、常にページ最上部へ飛ぶコードになってしまうわけですね。これにハマってハマって午前中一杯つぶしてしまいました...。自分が書いたコードは動かない、でもGoogle検索でヒットした様々なページのサンプルは動いている。何かスペルミスでもしているのかと思い、別サイトのサンプルコードをコピペして、ローカルで実行してみても動かない。なんだ...なにが違うんだ...。使っていた気がする、と思い出し、この記述をすると正常に動作。何なんだ...と悩みに悩んでDOCTYPE宣言が違うことにようやく気が付いた次第。いやぁ...お恥ずかしい...。付けようというところでしょうか。みたいな力技のほうがDOCTYPEとか気にしなくて良い分、良かったんじゃねーか...と思えてきた今日この頃でした。無駄に長くなってしまったので、要素を指定したスクロールについては(覚えていたら)また次回。[上へ]関連記事JavaScriptでファイル名順に複数ファイルを読み込む方法INPUTタグで複数ファイルを読み込む際、ブラウザ内で処理するときはFileReaderオブジェクトを使うことが多いと思います。これは非同期処理なので、はてファイル名順に処理する場合はど02024-06-13JavaScriptのcanvasで縦書きを行う際の備忘録canvas上に縦書きの文章を出力して画像化しようと考えてちょっとハマったので忘れないうちにメモしておきます。結論から先に書くと、基本的にcanvasにはwriting-modeの設定が効くの02024-06-11JavaScriptのWebAudioAPIで楽曲の口パクをしてみる以前、ソフトウェアの解説動画を作った際、おっさんの声だけ流れてるのもアレだし、最近流行りのアバターにしゃべらせるやつやってみよう、と思ったことがあります。vtuberとかおじさんよくわからない02023-11-20jQuery不要なLightbox代替スクリプトLuminousが本当に軽量jQueryって...重いですよね。各種ブラウザへの対応が面倒くさかった時代には本当にありがたかったのですが、モダンブラウザ全盛の今、jQueryの必要性を感じないことが多くなってきました。前回の記事「JavaScriptで画像を連続表示してコマ撮りムービー風の表示をしてみる」では連続して画像を表示することで、コマ撮りムービーのようなものをブラウザ上に表示することに成功しました。82023-01-24Amazonアソシエイトのレポート作成とダウンロードを自動化するAmazonのアフィリエイトプログラムを使っている方ならわかってもらえると思いますが、Amazonアソシエイトページのレポート画面ってすっっっっっごく使いづらいですよね。コメント投稿直後ならコメントの編集/削除が可能です。※24時間経過するか、新しく投稿した場合は古い投稿の編集や削除は出来ません。※ブラウザでCookieが受け入れられない場合はこの機能は使えません。非公開にチェックを入れたコメントは管理人のみ閲覧できます。コメント投稿のガイドライン誰もが閲覧できるコメント欄ですので個人が特定できる情報等は書き込まないようにしましょう。他人のHPやブログの文章を掲載する場合は著作権法第32条「引用」の条件を満たすかご確認ください。誹謗中傷にあたる表現などは場合によっては法的な責任を問われる可能性があるためご注意ください。とっちらか~るTOP。