Как сделать скрытие кнопки при скроле?

Антон

20.04.2021

Всем привет! Прочитав статью на этом сайте про создание кнопки для прокрутки страницы вверх, тоже решил реализовать ее, только на чистом js. За основу взял сss код с примера многоуважаемого Александра и скрестил все это дело с кодом js из инета. На удивление все заработало неплохо =). Но есть пара моментов, которые я не знаю как реализовать, поэтому и прошу помочь.
И так: Есть кнопка наверх на JavaScript.Сейчас она появляется при превышении определенного значения pageYOffset, и убирается так же, при возврате в нужную зону. А мне необходимо реализовать следующее:
------>Кнопка появляется как обычно при превышении установленного значения pageYOffset, а затем, через несколько секунд исчезает при отсутствии скролла. И заново появляется при любом скролее, при нахождении значений pageYOffset, в котором она должна быть.
-------> А второй вариант отличается от первого только тем, что кнопка, после того, как скрылась, появлялась при при скролле на определенное количество значений pageYOffset.

Вот ссылка на codepen -> codepen.io/man129/pen/NWdBNrd

p.s. Александр не удобно уже просить вас), но все же не могли бы вы взглянуть и подсказать как можно реализовать это, да и вообще подсказать адекватно ли эта функция реализована, может возможно более просто ее реализовать)
Благодарю!

Комментарии ()

Александр Мальцев

17 апреля 2021, 01:47

Привет!
Скролл к началу страницы на чистом JavaScript проще реализовать через scrollTo. Так кода будет меньше:

window.scrollTo({
  top: 0,
  behavior: "smooth"
});

Для того чтобы кнопка «Вверх» исчезала через 3 секунды после скролла можно написать следующий код:

document.addEventListener("DOMContentLoaded", () => {
  let toTopBtn = document.querySelector(".to-up");
  let pageYOffset = 0;
  let timeout;
  window.onscroll = function () {
    if (timeout) {
      window.clearTimeout(timeout);
    }
    if (window.pageYOffset > 580) {
      toTopBtn.style.display = "block";
    } else {
      toTopBtn.style.display = "none";
    }
    pageYOffset = window.pageYOffset;
    timeout = window.setTimeout(function(){
      if (window.pageYOffset === pageYOffset) {
        toTopBtn.style.display = "none";
      }
    }, 3000);
  }
  // плавный скролл наверх
  toTopBtn.addEventListener("click", function () {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  });
});

Cсылка на codepen: codepen.io/itchief/pen/NWdBRqZ

Антон

17 апреля 2021, 14:23

Александр в очередной раз огромное спасибо за решение! Работает js просто изумительно!) Осталось разобраться с валидатором который постоянно на меня ругается… Если будет время не могли бы вы мельком посмотреть что нужно исправить или добавить и как валидней прописать эту кнопку? Сама кнопка меня по оформлению полностью устраивет и минимальна по коду, но валидатора это не волнует…

HTML

<div class="to-up">
 <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17V4M3 10l7-7 7 7'/%3E%3C/g%3E%3C/svg%3E" alt="Стрелка вверх">
 </div>

CSS — я так понимаю учитывая js код можно вообще не указывать display: none и убрать этот пункт из css?

.to-up {
  position: fixed; /* фиксированная позиция */
  color: #fff; /* цвет текста */
  background-color: #3aa111; /* цвет заднего фона */
  right:  5px; /* расстояние от правого края */
  bottom: 80px; /* расстояние от нижнего края */
  padding: 13px 13px; /* отступы до содержимого блока */
  border-radius: 100%; 
  cursor: pointer; /* форма курсора */
  display: none; /* не отображать элемент */
  text-align: center; /*выравнивание содержимого элемента по центру */
}
div.to-up:hover {
  background-color: orange; /* цвет заднего фона при наведении */
}

@media screen and (min-width: 480px) {
  .to-up {
  right: 20px; /* расстояние от правого края */
  }
}

Codepen -> codepen.io/man129/pen/NWdBNrd

Огромное спасибо! ;)

Александр Мальцев

Сегодня в 01:48

Пожалуйста!
В HTML верстку можно сделать просто такой (саму стрелку создать через псевдоэлемент, например, ::before):

<div class="to-up"></div>

CSS:

.to-up {
  position: fixed; /* фиксированная позиция */
  color: #fff; /* цвет текста */
  background-color: #3aa111; /* цвет заднего фона */
  right: 20px; /* расстояние от правого края */
  bottom: 40px; /* расстояние от нижнего края */
  border-radius: 100%; 
  cursor: pointer; /* форма курсора */
  display: none; /* не отображать элемент */
  width: 40px;
  height: 40px;
}
.to-up::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 10px;
  top: 10px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17V4M3 10l7-7 7 7'/%3E%3C/g%3E%3C/svg%3E");
}
div.to-up:hover {
  background-color: orange; /* цвет заднего фона при наведении */
}

Codepen: codepen.io/itchief/pen/NWdBRqZ

Антон

2 часа назад

Александр, вы гений и спаситель! Огромное человеческое Спасибо!)

Антон

16 апреля 2021, 23:55

Видимо я еще слегка погорячился и все таки в консоле код выдает след.ошибки:
1) Uncaught TypeError: Cannot read property 'addEventListener' of null
at HTMLDocument.2) Uncaught TypeError: Cannot read property 'style' of null
at window.onscroll

Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.