?? ???? ???? ?? ?? ???? ?????? ???? ??? ???? ??? ?? ?? ? ??????. ? ??? ???? ??? ???, ?? ??? ? ??? (?? ??? ???? ??? ?) ? ??? ?? ??? ??? ??? ?? ?????.

? ??? ????? ? ???? ??? ??? ??? ???? ??? ???? ?????. JavaScript? ?? ?? ? ??? ??? ? ?? ??? ????? ????? ?? ?? ????. ???? ??? ? ?? ?? ??? ?? ?????.

?? 1 : ??? ??

?? JavaScript? ???? ??? ??????.

 var scrolltotopbtn = document.getElementById ( "scrolltotopbtn");

document.documentElement ??? ?? ??? ???? ??? ?? ?? ? ?????. ?? ??? ?????? ?? rootElement ?? ??? ??????.

 var rootelement = document.documentElement;

??? ?? ??? ??? ?? :

 ?? scrolltotop () {
  // ?? ??? ?? ??}

scrolltotopbtn.addeventListener ( "Click", ScrollTotop);

scrollToTop ???? scrollTo ???? ???? ?? ???? ???????.

 ?? scrolltotop () {
  // ?? ???? ?? ??? ???? scrollto ({{
    ?? : 0,
    ?? : "????"
  });
}

???? ?? ??????.

 #scrolltotopbtn {
  ??? : ?? ?;
  ?? : ??;
  ??-???? : 50%;
  ?? : ??;
  ?? : ???;
  ?? ?? : 16px;
  ?? ?? : 48px;
  ?? : 48px;
}

??? ??? ??? ???? (? : ?? ?).

 <button id="scrollToTopBtn">??</button>

??? ??? ????. (?? 1? ???? ??? ????????)

?? 2 : ??? ??? ?????

??? ??? ???? ???? ???? ?????.

 ?? handlescroll () {
  // ??? ??? ??}
document.addeventListener ( "scroll", handlescroll);

handleScroll ??? ???? ??? ? ??? ?????. ??? ??? ? ?? ?? ???????.

• scrollHeight ????? ?? ??? ?? ??? ???? ?? ??? ?????.
• clientHeight ??? ??? ??? ?? (??)? ?????.

scrollHeight Minus clientHeight ? ???? ??? ? ??? ? ?? ????.

 var scrolltotal = rootelement.scrollheight -RootElement.clientHeight;

scrollTotal ??? ???? ??? ? ??? ?? ?? ?? ?????. ??? ??? ? ??? ?? ?? ??? 0? 1 ??? ??? ????.? ???? ?? ??? ??/??? ????.

?? ??, ???? ???? ? ??? 80%? ????? ???? ?? ?? ??? ????? (??? 0.80). 80%? ??? ???, 1? ????? ????? ?? ? ?? ????????.

JavaScript ??? ??? ????.

 var rootelement = document.documentElement;

?? handlescroll () {
  // ??? ??? ?? var scrolltotal = rootelement.scrollheight -RootElement.ClientHeight;
  if ((rootElement.scrolltop / scrolltotal)> 0.80) {
    // ?? ?? ScrollTotOpBtn.classList.Add ( "showbtn");
  } ? ?? {
    // ?? ??? ScrollTotOpBtn.classList.Remove ( "showbtn");
  }
}

document.addeventListener ( "scroll", handlescroll);

??? ???? ???? ?? CSS? ?????.

 .scrolltotopbtn {
  /* ??? ??? ???? ???*/

  /* ??? ??? ??*/
  ?? : ??;
  ?? : 30px;
  ??? : 30px;

  /* ?? ?? ?? ?? ??? ?*/
  Z- ??? : 100;

  /* ????? ???? ?????*/
  ???? : 0;

  /* ?? ?? ??*/
  ?? : Translatey (100px);

  /* ?? ?? ??*/
  ?? : ?? 0.5 ?? ???;
}

.showbtn {
  ???? : 1;
  ?? : Translatey (0);
}

????? ???? ???? 80%? ??? ? ? ??? ???? ??? ?? ? ?? ????.

??? ?? ???? ??? ??? ???? ???? ?? ????. ??? ?? ?? ???? ??? ???? ??? ?? ?? ??? ?? ? ? ????.

? ??? ???? ? ?? ??? ???? ...

?? 3 : ?? ???

??? ??? API? ??? ??????. ??? ?????? ??? ? ??? ?? ???? ??? ????? ?? ? ??? ??? ??? ???? API???. Travis Almand? ?? ??? ?? ??? ??? ?????. MDN? ??? ??? ????.

??? ??? API? ?? ?? ?? ??? ?? ??? ?? ??? ?? ??? ???? ???? ??? ?????.

?? ?????! ??? ??? ?? ??? ??? ? ??? ?????.

 // ?? ? ??? ???? var target = document.querySelector ( "???");

?? ?? ??? ?? ???? ?? (?, ?? ??? ????) ??? ???? ?? ??? ??????. ?? ??? ????? ??? ?????.

 ?? ?? (??, ???) {
  // ?? ??? ??? ?? ?? ? ?????? ?? ??? ?????.
    if (EntrysInterSecting) {
      // ?? ?? ScrollTotOpBtn.classList.Add ( 'showbtn');
    } ? ?? {
      // ?? ??? ScrollTotOpBtn.classList.Remove ( 'showbtn');
    }
  });
}

??? ??? IntersectionObserver ????? ??? ?? ? ?? ??? ???????.

 Observer = New IntersectionObserver (??);

?????, ??? ????? ??? ??? ?? ??? ???? ?? ?? ????? ?????.

 Observer.observe (??);

???? ???? ???? ???

????! ??? Chris? 2019 ? CSS? ???? ???? ??? ???????.

 <a href="http://ipnx.cn/link/2e6d941e3bc2dbd3f122040f056b6718">??? ???? ??????</a>

 html {
  ???-?? : ????;
}

???? Chris? ???? ?? ? ??? ?? ??? ?? ? ?? ???? ????. ??? CSS? JavaScript?? ???? ??? ?? ? ??? ??? ??? ?? ??? ????.

?? ??! ?? ??? ????? ???????. ???? ??? ??? ???? ??? ???? ????? ??????. ?? ?? ?? ??? ??? ?????? ?? ??? ??? API? ???? ??? ??????. ????? CSS? ???? ???? ???? ???? ??? ? ? ????. ???, ??? ???? ?? ??? ???? ???? ?? ???? ?? ?? ???? ?????.

? ??? ?? ?? ?? ??? ? ? ??? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!