спасибо большое. Посмотрел урок, выучил команды, написал скрипт (немного отличающийся, писал сам), и заметил, что для более правдоподобной анимации скроллинга лучше установить таймер (я использовал интервал) на меньшее число (допустим 1), а убавление скроллинга на нужную скорость. К примеру у меня страница (Lorem*100) в 2700 пикселей (или в чем измеряет функция window.pageYOffset), и я установил интервал на 1, скорость на 1, и у меня получилась очень медленная, плавная красивая анимация. правда очень долгая, так как большая страница. Поставил скорость на 8 получилось в самый раз. Итог: Урок познавательный и мне очень понравился. Ставлю лайк и подписываюсь, канал интеесен. Вам удачи и большое спасибо, @WebDev с нуля. Канал Алекса Лущенко
Спасибо за отличные уроки, очень мне помогли, начал изучал благодаря каналу так- же aj и пых, спасибо, очень увлекательно, благодаря вам погрузился в мир веб - разработки
Спасибо огромное! На основе вашего скрипта сделал прокрутку до нужного якоря - просто вместо координат топа (0.0), использовал document.getElementById('yakor').offsetTop и заменил в цикле знак больше на меньше и минус на плюс :)
большое спасибо! кстати мне кажется лучше будет оперировать не таймером чтобы увеличивать скорость прокрутки. например так: scrolled = scrolled - 1; timer = setTimeout(scrollToTop, 10);
После просмотра возникло несколько вопросов: 1. Скажите, а почему именно тут заменили defer на внутрискриптовую функцию? Если с defer делать, на что это повлияет? 2. Если делать скролл блока, то в чем особенности? Как привязать координаты правильно относительно блока, а не всего окна? Спасибо.
Подскажите, как с помощью чистого javascript сделать плавную!!! прокрутку до определенного блока. Вот такой код работает, но он без плавной прокрутки Моя кнопка var btn = document.querySelector('.btn'); var footer = document.querySelector('.footer'); btn.addEventListener('click', function(event){ event.preventDefault(); var topFooter = footer.offsetTop; window.scrollBy(0, topFooter); console.log(topFooter); });
с плавной прокруткой получился вариант проще, вероятно он менее гибкий document.querySelector('.btn').onclick = function() { window.scrollTo({ top: 0, behavior: "smooth" }); } руководствовался этим developer.mozilla.org/ru/docs/Web/API/Window/scrollTo
Здравствуйте. Подскажите, пожалуйста, как запретить повторный вызов функции в момент когда она выполняется? Какой метод лучше подойдет в этом случае? Благодарю.
если вы вызываете функцию по событию - то отменить (снять событие), если нет - можно завести статическую переменную. При запуске функции ставить ее равной 1. Если повторный запуск произошел. Проверяем равна ли переменная 1. Если да - то сразу return. Когда функция выполнилась - ставим 0.
Спасибо, ваши уроки очень интересны!:) У меня вопрос, почему не сделать скрипт у закрывающего тега body, тога он будет загружаться после загрузки всей страницы, или я не права?(
Просто таких скриптов может быть довольно много и будет не очень читабельно. Автор сразу показал как правильно вынести все в отдельный файл. Если у вас один скрипт, то вполне можно обойтись вашим способом.
я чогось не розумію якщо добавляти скріпти в head то получиться така схема (загрузка script => загрузка body => виконання script) тоді навіщо заставляти користувача чекати загрузки скріпта з head і дивитись на недогружену сторінку якщо можна його прописати в кінці body і тоді він не буде сповільнювати загрузку основного контенту? PS я розумію що у нас тут маленькі скріпти і вони грузяться в мілісекунді але теоретично з великими можуть бути проблемиб хотілося б почути якесь розяснення бо судячи з коментарів багато хто також цього не зрозумів.
наконец я могу позволить себе написать коммент по теме. до начала изучения JS я начал с jQuery(да, это утопия) и уяснил какие-то базовые фишки. в общем начав смотреть этот урок я понял что сам могу сделать такую кнопку. может быть это смешно звучит для бывалых, но такие микро победы придают уверенности. причем тут как раз судя по всему и вырисовываются преимущества jquery(плавно прокручивается). .button display: none в css. $().ready(function(){ button = $(".button"); $(window).scroll(function(){ if($(window).scrollTop() > 100){ button.fadeIn(); } else{ button.fadeOut(); } }); button.click(function(){ $("html, body").animate({scrollTop:0}, 500) }) });
Есть более простой метод и он будет намного плавнее работать: document.getElementById("btn").onclick = function scrollTop(){ window.scrollBy(0,-30); // -30 это скорость,чем дальше от нуля,тем она выше if(pageYOffset > 0){ requestAnimationFrame(scrollTop); } }
изначально добавляете свойство display:none. На событие прокрутки вешаете функци. Внутри функции проверяете параметр pageY. Когда он больше какого-то значения кнопке делаете display: block/
спасибо большое. Посмотрел урок, выучил команды, написал скрипт (немного отличающийся, писал сам), и заметил, что для более правдоподобной анимации скроллинга лучше установить таймер (я использовал интервал) на меньшее число (допустим 1), а убавление скроллинга на нужную скорость.
К примеру у меня страница (Lorem*100) в 2700 пикселей (или в чем измеряет функция window.pageYOffset), и я установил интервал на 1, скорость на 1, и у меня получилась очень медленная, плавная красивая анимация. правда очень долгая, так как большая страница. Поставил скорость на 8 получилось в самый раз.
Итог: Урок познавательный и мне очень понравился. Ставлю лайк и подписываюсь, канал интеесен. Вам удачи и большое спасибо, @WebDev с нуля. Канал Алекса Лущенко
отлично, то чего и хотелось, а пока хотелось я делал так,
window.scrollTo({
top: 0,
behavior: "smooth"
});
просто вставьте в консоль и попробуйте )
Есть одно но. Это не будет работать в браузере Safari
Спасибо за отличные уроки, очень мне помогли, начал изучал благодаря каналу так- же aj и пых, спасибо, очень увлекательно, благодаря вам погрузился в мир веб - разработки
Добро пожаловать!
Спасибо за урок! Все четко и ясно) Очень помогли с дополнением курсового проекта полезной кнопочкой!
на jQuery
$('a.top').on(click, function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});
// параметры
0 - px от верха страницы,
800 - длительность анимации.
На доступном языке! Спасибо большое!
супер, было бы здорово, если бы Вы показали взаимодействие PHP и JS (как совместить переменные)
Спасибо огромное! На основе вашего скрипта сделал прокрутку до нужного якоря - просто вместо координат топа (0.0), использовал document.getElementById('yakor').offsetTop и заменил в цикле знак больше на меньше и минус на плюс :)
Спасибо огромное! Очень доходчиво и понятно.
Отличные уроки! Спасибо
большое спасибо!
кстати мне кажется лучше будет оперировать не таймером чтобы увеличивать скорость прокрутки.
например так:
scrolled = scrolled - 1;
timer = setTimeout(scrollToTop, 10);
Да, можно.
Очень доступно и понятно!
После просмотра возникло несколько вопросов:
1. Скажите, а почему именно тут заменили defer на внутрискриптовую функцию? Если с defer делать, на что это повлияет?
2. Если делать скролл блока, то в чем особенности? Как привязать координаты правильно относительно блока, а не всего окна?
Спасибо.
тот же вопрос, почему defer убрали. Почему на сайте его не будем использовать?
Т к defer это нововведение, его не поддерживают старые браузеры, поэтому всё ещё пользуются по старинке window.onload
а не легче button сделать ссылкой на body и плавность с помощью css?
Сделайте пожалуйста видео про классов, и прототипное наследование. ? Будет очень полезно.
увы, в один курс это не впишешь, довольно большая работа, но в JS есть куча нюансов - пока не решаюсь на это.
Лайк поставил, но лучше через "requestAnimationFrame" делать.
Движение более плавное будет.
@Василий Лотыш,
let scrolled;
let timer;
document.getElementById("top").onclick = function() {
scrolled = window.pageYOffset;
scrollToTop();
}
function scrollToTop() {
if (scrolled > 0) {
window.scrollTo(0, scrolled);
scrolled = scrolled - 15;
requestAnimationFrame(scrollToTop);
}
else {
window.scrollTo(0,0);
}
}
requestAnimationFrame(scrollToTop)
@@Овації спасибо, ты мне помог сделать классную анимацию
Четко и Понятно... Класс
Подскажите, как с помощью чистого javascript сделать плавную!!! прокрутку до определенного блока. Вот такой код работает, но он без плавной прокрутки
Моя кнопка
var btn = document.querySelector('.btn');
var footer = document.querySelector('.footer');
btn.addEventListener('click', function(event){
event.preventDefault();
var topFooter = footer.offsetTop;
window.scrollBy(0, topFooter);
console.log(topFooter);
});
Кто то поможет решить код?
По ходу дружище здесь мертвый канал и на твой вопрос забили)))
забей лучше в гугле, там и найдешь решение....
с плавной прокруткой получился вариант проще, вероятно он менее гибкий
document.querySelector('.btn').onclick = function() {
window.scrollTo({
top: 0,
behavior: "smooth"
});
}
руководствовался этим developer.mozilla.org/ru/docs/Web/API/Window/scrollTo
Почему бы не использовать css transition для плавности?
Подскажите плиз, почему этот код не докручивает странмцу до самого верха?!?!
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);
}
}
нужно смотреть. Киньет на codepen
Ничего не понял. Но очень интересно.
Здравствуйте. Подскажите, пожалуйста, как запретить повторный вызов функции в момент когда она выполняется? Какой метод лучше подойдет в этом случае? Благодарю.
если вы вызываете функцию по событию - то отменить (снять событие), если нет - можно завести статическую переменную. При запуске функции ставить ее равной 1. Если повторный запуск произошел. Проверяем равна ли переменная 1. Если да - то сразу return. Когда функция выполнилась - ставим 0.
Благодарю.
Спасибо, ваши уроки очень интересны!:)
У меня вопрос, почему не сделать скрипт у закрывающего тега body, тога он будет загружаться после загрузки всей страницы, или я не права?(
Просто таких скриптов может быть довольно много и будет не очень читабельно. Автор сразу показал как правильно вынести все в отдельный файл. Если у вас один скрипт, то вполне можно обойтись вашим способом.
я чогось не розумію якщо добавляти скріпти в head то получиться така схема (загрузка script => загрузка body => виконання script)
тоді навіщо заставляти користувача чекати загрузки скріпта з head і дивитись на недогружену сторінку якщо можна його прописати в кінці body і тоді він не буде сповільнювати загрузку основного контенту?
PS я розумію що у нас тут маленькі скріпти і вони грузяться в мілісекунді але теоретично з великими можуть бути проблемиб хотілося б почути якесь розяснення бо судячи з коментарів багато хто також цього не зрозумів.
Так, большие скрипты принято подключать перед закрывающимся тегом body - чтобы не заставлять пользователя ждать.
А можно присвоить свойство transition, чтобы была мягкая прокрутка? Спасибо за уроки :)
Я понимаю, что можно в timer менять, ну вот свойство transition делает без рывков
Конечно можно, просто это урок для понимания js, а не наведения лоска. Поэтому многие такие моменты упускаю.
наконец я могу позволить себе написать коммент по теме. до начала изучения JS я начал с jQuery(да, это утопия) и уяснил какие-то базовые фишки. в общем начав смотреть этот урок я понял что сам могу сделать такую кнопку. может быть это смешно звучит для бывалых, но такие микро победы придают уверенности. причем тут как раз судя по всему и вырисовываются преимущества jquery(плавно прокручивается). .button display: none в css.
$().ready(function(){
button = $(".button");
$(window).scroll(function(){
if($(window).scrollTop() > 100){
button.fadeIn();
}
else{
button.fadeOut();
}
});
button.click(function(){
$("html, body").animate({scrollTop:0}, 500)
})
});
спасибо
Есть более простой метод и он будет намного плавнее работать:
document.getElementById("btn").onclick = function scrollTop(){
window.scrollBy(0,-30); // -30 это скорость,чем дальше от нуля,тем она выше
if(pageYOffset > 0){
requestAnimationFrame(scrollTop);
}
}
скрежет при нажатии на клавиатуру мешает смотреть
как сделать, что бы кнопка вверх была не видна, а появлялась после начала прокрутки и пропадала если страница вверху?
изначально добавляете свойство display:none. На событие прокрутки вешаете функци. Внутри функции проверяете параметр pageY. Когда он больше какого-то значения кнопке делаете display: block/
Александр, спасибо большое. Сделал так и все заработало:
var top = document.getElementById('top');
window.onscroll = function(){
if(window.pageYOffset > 100){
top.style.display = 'block';
} else {
top.style.display = 'none';
}
}
а можно сделать через hidden="true"? Потому что кнопка с стилями bootstrap и display:none не срабатывает.
Почему так много дизлайков?
бывают прокрутки супер - плавные с разгоном. Например тут thejadeway.com/ . Интерессно как это реализованно.
Зависит от того, как мы наращиваем переменную.
если кнопку топ кликаеш дважды скорость прокрутки повысется в двое заметил побочный эффект
прикольно конечно но не идеально.. можно сделать так что б оно прыгнула 1 раз наверх (как вначале этого ролика) но мееедленнооо?))
Можно. Плагин купите и будет. Ребят вы серьезно? Тратишь время, объясняешь, а вы "прикольно но не идеально"?
спасибо за уроки, высказал мнение имею право, не нравится - мнение блокируйте или отключайте коменты. чёт нервные все такие
А жизнь такая. Если есть идеи или интересные штуки, которые нужно реализовать - пишите подробно сделаю, просто тяжело понять, прыгнула и т.д.
Ребята, кто еще додумался как сделать прокрутку сверху вниз?
Вот мое решение
jsfiddle.net/sy0emmz0/1/
делитесь своим. Без jquery)
переменную timerBot можно было не задавать
test1.onclick = function scrollToDown() {
scrolled = window.pageYOffset;
scrolled+=100;
window.scrollTo(0,scrolled);
timer1 = setTimeout(scrollToDown, 150);
console.log(scrolled);
if (scrolled == (window.pageYOffset+100)) {
clearTimeout(timer1);
}
Уроки полезные, но неужели нельзя говорить четче и делать видео в 2 раза короче?... 7 минут чтобы написать 5 строчек кода.. тяжело смотреть
Смотрите плейлист javaScript решает!
Не смотрите, книжки читайте. Скорее всего, темп урока сделан спецом, что бы человек мог сам ручками писать увиденное, это хорошо для обучения.
Вся эта серия рассчитана на учеников которые сидят и набирают. Если Rodion это медленно - то на платные курсы плиз.