Содержание:
Как сделать скрытие кнопки при скроле?
Всем привет! Прочитав статью на этом сайте про создание кнопки для прокрутки страницы вверх, тоже решил реализовать ее, только на чистом js. За основу взял сss код с примера многоуважаемого Александра и скрестил все это дело с кодом js из инета. На удивление все заработало неплохо =). Но есть пара моментов, которые я не знаю как реализовать, поэтому и прошу помочь.
И так: Есть кнопка наверх на JavaScript.Сейчас она появляется при превышении определенного значения pageYOffset, и убирается так же, при возврате в нужную зону. А мне необходимо реализовать следующее:
------>Кнопка появляется как обычно при превышении установленного значения pageYOffset, а затем, через несколько секунд исчезает при отсутствии скролла. И заново появляется при любом скролее, при нахождении значений pageYOffset, в котором она должна быть.
-------> А второй вариант отличается от первого только тем, что кнопка, после того, как скрылась, появлялась при при скролле на определенное количество значений pageYOffset.
Вот ссылка на codepen -> codepen.io/man129/pen/NWdBNrd
p.s. Александр не удобно уже просить вас), но все же не могли бы вы взглянуть и подсказать как можно реализовать это, да и вообще подсказать адекватно ли эта функция реализована, может возможно более просто ее реализовать)
Благодарю!
И так: Есть кнопка наверх на JavaScript.Сейчас она появляется при превышении определенного значения pageYOffset, и убирается так же, при возврате в нужную зону. А мне необходимо реализовать следующее:
------>Кнопка появляется как обычно при превышении установленного значения pageYOffset, а затем, через несколько секунд исчезает при отсутствии скролла. И заново появляется при любом скролее, при нахождении значений pageYOffset, в котором она должна быть.
-------> А второй вариант отличается от первого только тем, что кнопка, после того, как скрылась, появлялась при при скролле на определенное количество значений pageYOffset.
Вот ссылка на codepen -> codepen.io/man129/pen/NWdBNrd
p.s. Александр не удобно уже просить вас), но все же не могли бы вы взглянуть и подсказать как можно реализовать это, да и вообще подсказать адекватно ли эта функция реализована, может возможно более просто ее реализовать)
Благодарю!
Скролл к началу страницы на чистом JavaScript проще реализовать через scrollTo. Так кода будет меньше:
Для того чтобы кнопка «Вверх» исчезала через 3 секунды после скролла можно написать следующий код:
Cсылка на codepen: codepen.io/itchief/pen/NWdBRqZ
HTML
CSS — я так понимаю учитывая js код можно вообще не указывать display: none и убрать этот пункт из css?
Codepen -> codepen.io/man129/pen/NWdBNrd
Огромное спасибо! ;)
В HTML верстку можно сделать просто такой (саму стрелку создать через псевдоэлемент, например, ::before):
CSS:
Codepen: codepen.io/itchief/pen/NWdBRqZ
1) Uncaught TypeError: Cannot read property 'addEventListener' of null
at HTMLDocument.2) Uncaught TypeError: Cannot read property 'style' of null
at window.onscroll