Home>

Thanks for reading! !!
JS beginner web designer.

On the following site, find JS written at the top of the page, while watching this article
I try to write it myself while analyzing.

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

But suddenly I didn't understand the meaning from the first step
I asked here... (It becomes the following code.)

// Function to get the scroll amount
function getScrolled() {
  return (window.pageYOffset !== undefined )? window.pageYOffset: document.documentElement.scrollTop;
}

If the scroll amount is not equal to undefined and "window.pageYOffset" is equal to the function getScrolled, substitute the process of executing scrollTop.

However, I am not sure what this "window.pageYOffset" means. (I know that I only get the scroll amount...)

I would be grateful if someone could teach me;

Sorry to trouble you, but thank you! !!

  • Answer # 1

    Ternary operator

    Do you know Based on this, it is a process like this

    function getScrolled() {
      var ret;
      if(typeof window.pageYOffset !== "undefined"){
        ret=window.pageYOffset;
      }else{
        ret=document.documentElement.scrollTop;
      }
      return ret;
    }


    If window.pageYOffset is available use it, if not
    is to use document.documentElement.scrollTop

    window.scrollY

    Document.documentElement

    Element.scrollTop

    Please check around

  • Answer # 2

    So the source interpretation is correct. Since it is a function in the first place, it is not an assignment. .. I think that understanding is such, except for mistakes in detailed expressions such as.

    As for window.pageYOffset, we are aware of the word.
    If you can't understand it, I think there's no choice but to understand how it actually works.

    This is the site that googled at window.pageYOffset and appeared at the top.
    Please take a look. I think you can get an image.
    https://lab.syncer.jp/Web/API_Interface/Reference/IDL/Window/pageYOffset/

  • Answer # 3

    >If the original interpretation is incorrect, we would be grateful if you could point out that as well.

    I think it's correct.

    >I'm not sure what "window.pageYOffset" means

    Why not try Gugu?
    window.pageYOffset-Google Search

    reference:
    Talk when getting scroll amount with Javascript-Jako script

  • Answer # 4

    I'm not sure what "window.pageYOffset" means.

    It is written in the reference of the presented link.

    [A button to return to the top implemented with CSS and JavaScript without using jQuery-Me and natto rice]

    Many browsers, especially pageYOffset on smartphones. I think you can.
    However, this property doesn't work in IE.
    So I have included document.documentElement.scrollTop for IE.


    Considering that it may not be implemented depending on the browser,window.pageYOffsetIf you can usewindow.pageYOffsetI can't use (= IE) browser withdocument.documentElement.scrollTopIs the code to use.

  • Answer # 5

    As you can see, this is the function that gets the scroll amount.
    To get the scroll amount window.pageYOffset and document.documentElement.scrollTop
    There are two ways.
    However, there are problems with these two.
    window.pageYOffset Does not work on IE9 and below browsers
    document.documentElement.scrollTop Does not work with apple products
    Then what should we do? That's what the code above looks like.
    I added the explanation below.

    // Function to get the scroll amount
    function getScrolled() {
    // if window.pageYOffset is defined (if not IE9 or below)
    // Return window.pageYOffset as the scroll amount.
    // If not defined (if IE9 or lower) document.documentElement.scrollTop is returned as the scroll amount.
      return (window.pageYOffset !== undefined )? window.pageYOffset: document.documentElement.scrollTop;
    }


    Well, I don't think I need to support 2020 IE9 or below, so
    Now it feels like almost unnecessary code.