Кнопка up button на свой сайт

Кнопка вверх на чистом яваскрипте js. Только один javascript и еще css сразу для вставки на сайт или в виджет.

кнопка home на клавиатуре

Ап батон - это кнопка пролистывания на самый верх. Своего рода замена кнопке “Home” на клавиатуре или кнопки “Page Up”. Кнопка Up Button служит лишь для того чтобы быстро пролистнуться на самый верх. В amp версиях страниц, для быстроты и упрощенности. Кнопку up button заменили на якорь с решеткой В_верх. в адресной строке появится решетка после нажатия на такую ссылку и страница мгновенно пролестнется на самый верх. <- Ооо... нодо же, как гениально! :-D

Принцип работы кнопки ап батон очень прост. Айдишнику назначается стиль через скрипт. Который появляется при прокрутке страницы дальше чем сто пикселей. И как только скрол будет равен нулю класс для батана исчезает.

реклама

Этот вариант самый легкий потому что стиль создается как только прослушка окна на скрол “window.addEventListener(‘scroll, function button-vUp);” достигает порога прокрутки в пикселях.

<!-- ХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХ
         Up Button!
ХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХ-->
 <div id="buttonUp"></div>
  <!-- class OLd button -->
<style>
  .verh_invisible{
  display:none;
}
</style>
<script>
buttonUp.style.cssText=`color: black !important;
  background-color: yellow;
  text-align: center;
  bottom:30px;
  position: fixed;
  right: 10%;
  opacity: 0.7;
  border-radius:50%;
  border: green solid 2px;
  `;
window.addEventListener('scroll', function() {
  document.getElementById('buttonUp').innerHTML = '^<br> Up Button!' + pageYOffset;
});
window.onload=function(){
 if(scrollY< 100){
  document.getElementById('buttonUp').classList.add('verh_invisible');
  }
}
window.addEventListener('scroll', function(){

  if(scrollY < 100){
  document.getElementById('buttonUp').classList.add('verh_invisible');
}else{
 document.getElementById('buttonUp').classList.remove('verh_invisible');

 document.getElementById("buttonUp").onclick = function() {
  window.scrollTo(0,0);
  }
}
});
</script>