JSです。下記の構文の意味が本当に分かりません・・・どなたかご教授いただけますと幸いです！

閲覧ありがとうございます！！
JS初心者のウェブデザイナーです。

下記のサイトで、ページトップへのJSを書かれているのを見つけ、この記事を見ながら
分析しつつ自分でも書いてみるということをしています。

https://hiroshi-yokota.com/2019/12/10/back-to-top/

ですが、いきなり1段目から意味がわからず調べてもよくわからなかったので
こちらに質問させていただきました…。（下記のコードになります。）

//スクロール量を取得する関数
function getScrolled() {
  return ( window.pageYOffset !== undefined ) ? window.pageYOffset: document.documentElement.scrollTop;
}

getScrolledという関数にスクロール量がundefinedと等しくないときに「window.pageYOffset」等しければ、scrollTopを実行するという処理を代入。

という風に解釈をしたのですが、（そもそもの解釈が間違っていたらそちらもご指摘いただけますと幸いです。）この、「window.pageYOffset」がどういう事なのかがよく分かりません。（スクロール量を取得するということだけはわかっているつもりなのですが・・・）

どなたかご教授いただけますと幸いです；；

お手数ですが、宜しくお願い致します！！

行動規範の内容に同意します

回答5件

ベストアンサー

三項演算子

は、ご存知ですか？これを踏まえてこんな感じの処理です

javascript
1function getScrolled() {
2  var ret;
3  if(typeof window.pageYOffset !== "undefined"){
4    ret=window.pageYOffset;
5  }else{
6    ret=document.documentElement.scrollTop;
7  }
8  return ret;
9}

window.pageYOffsetが使えるならそれをつかって、使えないなら
document.documentElement.scrollTopを使うということです

あたりも確認ください

投稿2020/07/25 03:49

yambejp

総合スコア114968

kahosayshello

2020/07/25 04:10

ご回答ありがとうございます！！三項演算子は昨日知りました！＞「window.pageYOffsetが使えるならそれをつかって、使えないなら document.documentElement.scrollTopを使うということです」そういうことだったのですね！！この場合のundefinedの解釈の仕方が自分の中でそもそも間違っていたかもしれません＞＜上記の解説でよく分かりました！参考にいただきましたリンク先のことについても勉強させていただきます！ありがとうございました！！

行動規範の内容に同意します

「window.pageYOffset」がどういう事なのかがよく分かりません。

提示されたリンクの参考先に書いてあります。

【jQueryを使わず、CSSとJavaScriptで実装するトップに戻るボタン - わたしと納豆ごはん】
https://tomotan.hateblo.jp/entry/web-top-of-page

多くのブラウザ、特にスマートフォンではpageYOffsetだけでも。いけると思います。

ですが、このプロパティはIEでは機能しません。
そのためIE用にdocument.documentElement.scrollTopを含めています。

ブラウザによって、実装されていない場合があるということを考慮して、window.pageYOffsetが使えたらwindow.pageYOffsetを使って、使えない（＝IE）ブラウザはdocument.documentElement.scrollTopを使う、というコードです。

投稿2020/07/25 03:52

kei344

総合スコア69458

kahosayshello

2020/07/25 04:11

ご回答ありがとうございます！！すみません、参考先の文言を見落としていました・・・！ IEに機能しないからこういう書き方をされているのですね。理解できました！本当にありがとうございます＞＜

退会済みユーザー

2020/07/25 04:17

pageYOffset つかえないのは IE9未満なんで実はもうこの条件式は必要ないんだよね

kei344

2020/07/25 04:21

To: asahina1979さんここ数年内に「IE8で組んでください、うちの環境それなので」と頼まれたことがありますよ（笑）条件式もそうだし最近の実装では「window.scrollY」が正しい気もします。【window.scrollY - Web API | MDN】 https://developer.mozilla.org/ja/docs/Web/API/Window/scrollY > pageYOffset プロパティは、scrollY プロパティのエイリアスです。

退会済みユーザー

2020/07/25 05:41

Windows 7 が存命だった時期ですね。 Windows 8 は IE 9 が標準だったような

行動規範の内容に同意します

そもそもの解釈が間違っていたらそちらもご指摘いただけますと幸いです。

正しいと思います。

「window.pageYOffset」がどういう事なのかがよく分かりません

ググってみてはいかがですか？
window.pageYOffset - Google 検索

参考：
Javascriptでスクロール量を取得する時の話 - じゃこscript

投稿2020/07/25 03:48

Lhankor_Mhy

総合スコア36142

kahosayshello

2020/07/25 04:06

ご回答ありがとうございます！！その辺についてもう少し勉強します＞＜

行動規範の内容に同意します

ソースの解釈はそれで正しいです。そもそも関数なので代入ではない。。などの細かい表現の誤りを除けば、理解はそんなもんだと思います。
https://lab.syncer.jp/Web/API_Interface/Reference/IDL/Window/pageYOffset/

window.pageYOffsetについては、その言葉の認識はあっています。
それで理解できないのなら、実際に使ってどういうものかを理解するしかないと思います。

window.pageYOffsetでググって一番上に出てきたサイトです。
一度見てみてください。イメージが掴めると思います。
https://lab.syncer.jp/Web/API_Interface/Reference/IDL/Window/pageYOffset/

投稿2020/07/25 03:45

Cojiro

総合スコア539

kahosayshello

2020/07/25 04:05

ご回答ありがとうございます！！解釈が概ねあっていてよかったです！！こちらのサイトを拝見し、量を計測するものという理解はしたのですが、量を計測してどういうことなのかがいまいちわからず、こちらに質問させていただきました…＞＜その辺の理解もう少し深めます！ありがとうございました！

行動規範の内容に同意します

書いてある通りこれはスクロール量を取得する関数です。
スクロール量を取得するにはwindow.pageYOffset　と　document.documentElement.scrollTop
二つの方法があります。
しかし、この二つには問題点があります。
window.pageYOffset　IE9以下のブラウザでは動作しない
document.documentElement.scrollTop　リンゴ製品では動作しない
ではどうするか？そこで使うのが上記のようなコードです。
下記に説明を追加してみました。

Javascript
1//スクロール量を取得する関数
2function getScrolled() {
3// window.pageYOffsetが定義されているのであれば(IE9以下でないのであれば)
4// window.pageYOffsetをスクロール量として返却する。
5// 定義されていなければ(IE9以下なら)document.documentElement.scrollTopをスクロール量として返却する。
6  return ( window.pageYOffset !== undefined ) ? window.pageYOffset: document.documentElement.scrollTop;
7}