Форум

DVV · #1 (**permalink**) 06.10.2021, 15:35

Кто может подсказать, в чем проблема. Не работает скрипт плавной прокрутки вверх сайта при клике на кнопку.

export default function scrollToTop() {
    const body = document.getElementsByTagName('body')[0];
    const topArrow = document.querySelector('.top-arrow');
    let scrolled;
	let timer;
    
    body.addEventListener('scroll', function() {
        getWindowScrollTop(this);
    });

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

    function getWindowScrollTop(el) {

        let cont_top = el.scrollTop ? el.scrollTop : document.body.scrollTop;

        if(cont_top >= 300) {
            topArrow.classList.add('top-arrow--show');
            topArrow.onclick = () => {
                scrolled = window.pageYOffset;
                scrollToTop();
            }
        } else {
            topArrow.classList.remove('top-arrow--show');
        }
    }
}

рони · #2 (**permalink**) 06.10.2021, 16:14

DVV,

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

DVV · #3 (**permalink**) 06.10.2021, 16:24

https://viacheslavdemchenko.github.io/t-task-prod/

рони · #4 (**permalink**) 06.10.2021, 17:21

DVV,
строка 29 должна быть в строке 6. почему на вашей странице не работает window.scrollTo может кто-то ещё подскажет.

рони · #5 (**permalink**) 06.10.2021, 17:57

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>

Форум

Справочник

Discord чат

Курсы javascript