Всем привет! Прочитав статью на этом сайте про создание кнопки для прокрутки страницы вверх, тоже решил реализовать ее, но только на чистом JavaScript.
За основу взял сss-код из примера многоуважаемого Александра и скрестил все это дело с js-кодом из инета. На удивление все заработало неплохо =). Но есть пара моментов, которые я не знаю как реализовать, поэтому и прошу помочь.И так: есть кнопка наверх на JavaScript. Сейчас она появляется при превышении определенного значения pageYOffset
, и убирается так же, при возврате в нужную зону.
pageYOffset
, а затем, через несколько секунд исчезает при отсутствии скролла. После этого заново появляется при любом скроле, если она находится в пределах значений pageYOffset
, в которых она должна быть.
Второй вариант отличается от первого только тем, что кнопка, после того, как скрылась, должна появляться только при скролле, если значение на которое он произошёл больше определенного количества пикселей.
Вот ссылка на codepen: https://codepen.io/man129/pen/NWdBNrdПодскажите кто знает, как можно реализовать это. Да и вообще адекватно ли эта функция реализована. Может возможно её более просто ее реализовать.
Благодарю!
Скролл к началу страницы на чистом 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
Вот эта часть непонятного для меня кода которую вы указали в codepen:
А вот сам код из примера и тот который я взял за пример:
HTML
CSS
JS
Повторюсь сама кнопка работает что с непонятным мне кодом, что без него. Помогите пожалуйста разобраться за что отвечает этот непонятный мне код. Спасибо!
1) Uncaught TypeError: Cannot read property 'addEventListener' of null
at HTMLDocument.2) Uncaught TypeError: Cannot read property 'style' of null
at window.onscroll