Учим JavaScript 29. Плавная прокрутка страницы вверх

👇 Разверни для полной информации

Пишем плагин, который позволяет плавно прокручивать страницу вверх

[lancylancy]

спасибо большое. Посмотрел урок, выучил команды, написал скрипт (немного отличающийся, писал сам), и заметил, что для более правдоподобной анимации скроллинга лучше установить таймер (я использовал интервал) на меньшее число (допустим 1), а убавление скроллинга на нужную скорость.
К примеру у меня страница (Lorem*100) в 2700 пикселей (или в чем измеряет функция window.pageYOffset), и я установил интервал на 1, скорость на 1, и у меня получилась очень медленная, плавная красивая анимация. правда очень долгая, так как большая страница. Поставил скорость на 8 получилось в самый раз.


Итог: Урок познавательный и мне очень понравился. Ставлю лайк и подписываюсь, канал интеесен. Вам удачи и большое спасибо, @WebDev с нуля. Канал Алекса Лущенко

[ЕкатеринаКоктыш-нж]

Спасибо за урок! Все четко и ясно) Очень помогли с дополнением курсового проекта полезной кнопочкой!

[Евгений-гсъ]

Спасибо за отличные уроки, очень мне помогли, начал изучал благодаря каналу так- же aj и пых, спасибо, очень увлекательно, благодаря вам погрузился в мир веб - разработки

[dimasok]

Спасибо огромное! На основе вашего скрипта сделал прокрутку до нужного якоря - просто вместо координат топа (0.0), использовал и заменил в цикле знак больше на меньше и минус на плюс :)

[pendalfgrey]

на jQuery

$('a.top').on(click, function(){
: 0}, 800);
return false;
});

// параметры
0 - px от верха страницы,
800 - длительность анимации.

[arthurshaidullin]

отлично, то чего и хотелось, а пока хотелось я делал так,

window.scrollTo({
top: 0,
behavior: "smooth"
});

просто вставьте в консоль и попробуйте )

[ИльяНесмиянов-фч]

Спасибо огромное! Очень доходчиво и понятно.

[ВладимирКириллов-иь]

супер, было бы здорово, если бы Вы показали взаимодействие PHP и JS (как совместить переменные)

[ВасилийКопылов-дж]

Подскажите, как с помощью чистого javascript сделать плавную!!! прокрутку до определенного блока. Вот такой код работает, но он без плавной прокрутки
<div class="container">
<a class="btn" href="#">Моя кнопка</a>
</div>

<div class="footer"></div>


<script>
var btn =
var footer =

btn.addEventListener('click', function(event){
event.preventDefault();
var topFooter = footer.offsetTop;
window.scrollBy(0, topFooter);

console.log(topFooter);

});
</script>

[spoonjeee]

большое спасибо!
кстати мне кажется лучше будет оперировать не таймером чтобы увеличивать скорость прокрутки.
например так:
scrolled = scrolled - 1;
timer = setTimeout(scrollToTop, 10);

[reperizvio]

а не легче button сделать ссылкой на body и плавность с помощью css?

[saskirakosyan]

Сделайте пожалуйста видео про классов, и прототипное наследование. ? Будет очень полезно.

[Овації]

Лайк поставил, но лучше через "requestAnimationFrame" делать.
Движение более плавное будет.

[andriidou]

я чогось не розумію якщо добавляти скріпти в head то получиться така схема (загрузка script => загрузка body => виконання script)
тоді навіщо заставляти користувача чекати загрузки скріпта з head і дивитись на недогружену сторінку якщо можна його прописати в кінці body і тоді він не буде сповільнювати загрузку основного контенту?
PS я розумію що у нас тут маленькі скріпти і вони грузяться в мілісекунді але теоретично з великими можуть бути проблемиб хотілося б почути якесь розяснення бо судячи з коментарів багато хто також цього не зрозумів.

[ColorKat]

Подскажите плиз, почему этот код не докручивает странмцу до самого верха?!?!


function scrollToTop(){
if(scrolled > 100){
window.scrollTo(0, scrolled);
scrolled -= 20;
timer = setTimeout(scrollToTop, 4);
}else if(scrolled < 100){
clearTimeout(timer);
window.scrollTo(0, scrolled);
scrolled -= 4;
timer = setTimeout(scrollToTop, 4);
}else if(scrolled < 20){
window.scrollTo(0, 0);
clearTimeout(timer);
}
}

[TigraDP]

Здравствуйте. Подскажите, пожалуйста, как запретить повторный вызов функции в момент когда она выполняется? Какой метод лучше подойдет в этом случае? Благодарю.

[evgeniyprowork]

с плавной прокруткой получился вариант проще, вероятно он менее гибкий
= function() {
window.scrollTo({
top: 0,
behavior: "smooth"
});
}

[alexandrpritula]

Почему бы не использовать css transition для плавности?

[Anton-oftb]

После просмотра возникло несколько вопросов:
1. Скажите, а почему именно тут заменили defer на внутрискриптовую функцию? Если с defer делать, на что это повлияет?
2. Если делать скролл блока, то в чем особенности? Как привязать координаты правильно относительно блока, а не всего окна?
Спасибо.

[Zluka]

Спасибо, ваши уроки очень интересны!:)
У меня вопрос, почему не сделать скрипт у закрывающего тега body, тога он будет загружаться после загрузки всей страницы, или я не права?(