Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.10.2021, 16:35
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 125

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

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');
        }
    }
}

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

DVV,

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 06.10.2021, 17:24
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 125

https://viacheslavdemchenko.github.io/t-task-prod/
Ответить с цитированием
  #4 (permalink)  
Старый 06.10.2021, 18:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

DVV,
строка 29 должна быть в строке 6. почему на вашей странице не работает window.scrollTo может кто-то ещё подскажет.
Ответить с цитированием
  #5 (permalink)  
Старый 06.10.2021, 18:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ошибки и баги на сайте Jeremen Сайт Javascript.ru 79 13.08.2021 13:47
не работает кнопка devadas Общие вопросы Javascript 0 21.02.2014 08:55
Стрелка вверх/ в низ как в контакте, навигация страниц как в контакте кнопка "назад" Pashok(one) Общие вопросы Javascript 2 07.01.2013 23:42
В IE9 не работает кнопка отправить - type="submit" Edan Internet Explorer 3 23.12.2011 23:21
Не работает кнопка через live Dorian_bs Общие вопросы Javascript 7 04.12.2011 01:29