Показать сообщение отдельно
  #5 (permalink)  
Старый 06.10.2021, 17:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

DVV,
<!DOCTYPE html>
<html lang="ru">

<head>
    <title>T-Task</title>
    <style type="text/css">
        p {
            height: 2000px;
        }

        .top-arrow {
            position: fixed;
            display: none;
            top: 10px;
            right: 10px;
        }

        .top-arrow.top-arrow--show {
            display: block;
        }
    </style>
</head>

<body>
    <p></p>
    <button class="btn top-arrow">вверх</button>
    <script>
        function scrollToTop() {
            const body = document.getElementsByTagName('body')[0];
            const topArrow = document.querySelector('.top-arrow');
            let scrolled;
            let timer;
            topArrow.onclick = () => {
                scrolled = window.pageYOffset;
                scrollToTop();
            }
            window.addEventListener('scroll', function() {
                getWindowScrollTop(this);
            });

            function scrollToTop() {
                clearTimeout(timer);
                if (scrolled > 0) {
                    scrolled = scrolled - 15;
                    timer = setTimeout(scrollToTop, 10);
                }
                window.scrollTo(0, scrolled);
            }

            function getWindowScrollTop(el) {
                topArrow.classList.toggle('top-arrow--show', el.pageYOffset >= 300)
            }
        };
        scrollToTop()
    </script>
</body>

</html>
Ответить с цитированием