Анимированная прокрутка страницы на jQuery
HTML-код
- Опубликовано: 16 ноя 2024
- В этом небольшом видео я покажу вам как можно сделать простейшую прокрутку всей страницы до определенного места на сайте и сделать это все вместе с анимацией, то есть плавно.
1) Видеоурок по Emmet: • Пишем код быстро благо...
2) Код из урока: itproger.com/c...
✔ Основной сайт: itproger.com/
✔ -------------
Группа Вк - prog_life
Группа FaceBook - goo.gl/XW0aaP
Я в Google+ - goo.gl/Tqt9W0
Страничка Twitter - / goshadudar
Страничка Вк - codi999
✔ Начните зарабатывать на RUclips - join.air.io/mon...
✔ Видео по заработку на RUclips - goo.gl/RLPXV8
Помощь в развитии канала.
Яндекс Деньги: 410014343706921
Кошельки WebMoney:
Доллар: Z331064341236
Гривна: U386388718252
Рубль: R214610220703
Будет правильнее оставлять идентификатор в href, и в функции брать айдишник из href. а что бы не было в строке урл айдишника в функции нужно вызвать preventDefault(). Это так же позволит, если js отключен или не сработала функция, прыгнуть на то место куда ведет айдишник.
Хорошо объясняешь, часто смотрю твои уроки, т.к. пишу диплом и мне просто необходимо брать где-то информацию. Но, блин, "Наверх" пишется с одной "в". Меня это прям за душу зацепило.
Суть то в другом)
у меня нет ошибок все правильно но у меня при нажатии не пролистывает
ГОША, Я ТЕБЯ ОБОЖАЮ!!
Спасибо, отличный урок! ..И действительно, почему бы и не подписаться....
Красава. Было бы круто узнать больше трюков в вэбе.
спасибо за урок!
п.с. исправил ошибку - поставил в одном случае ` вместо ' - еле отыскал ;-)
Григорий, супер. Я снимаю шляпу :-) Просто и подробно
Класс, спасибо, код с сайта работает!
гоша, тыж програмист! сделай видиоуроки по SDK а то совсем немогу сделать игру без него
Здраствуйте, хорошее видео, легко, просто, понятно. Кстати хотел спросить, где можно найти такой же редактор кода с этой темой? Очень понравился.
Дефолтный Atom.
Александр Кисель, sublime text с material theme.
Гогша, спасибо за видео. Но чем плохи якоря? Насколько важно ничего не добавлять в адресную строку?
Это просто эстэтически не красиво. Любой фронт-енд должен стремиться к бэк-енду. Это как техника Apple, где не видно ничего лишнего и с этим комфортно работать, но также и те кому нужно, не могут ничего изменить
scrollTop это что? функция? переменная?
отличное объяснение и отличная работа, Гоша 10 из 10и!
Сделайте урок по созданию слайдера с:
ну, якори обозначать тоже хорошо
как это внутри реализовано? через setInteval() изменяется body.topScroll ?
//грубо говоря
А почему не javascript:void(0)?
var offset обьяснил как бог, спасибо (это не ирония)
function slowScroll (id) {
var offset = 0;
$('html, body').animate ({
scrollTop: $(id).offset ().Top - offset
}, 500);
return false;
}
@@iteenager5207 ты
А как сделать чтоб кнопка "Наверх" появлялась на прокрутку
Отлично, есть какой-то ресурс где наглядно показываются фишки на jquery?
есть, RUclips называется
ахахх 2 строчки кода? подключаем целую библиотеку!
Что значит типо ссылка в никуда?
Да, и правильнее будет этот псевдо-протокол "javascript:" устарел, и используется только для букмарклетов.
Aizhar Olexin Спасибо!
А почему нельзя использовать просто решетку?
Неработает((
спасибо за урок
Спасибо)
function slowscroll () {
var offset = 0;
$('html, body').animate({
scrollTop: $(id).offset().top - offset
}, 500);
return false;
}
в какой среде разработке пишешь?
Здравствуйте Гоша, какой редактор кодите?
на видео был atom
v emmet mojno napisat simvol (!) i najat klavishu tab i html karkas pishetsa avtomaticheski
barev)
спасибо помогло
Блин я взял код прямо из сайта plurrimi.com/study/19 но у меня все равно ничего не работает(
А библиотеку подклюил?
Очень сильно замороченный способ.
К каждой ссылке подключать функцию - бред полный.
ПРОСТЕЙШИЙ способ для работы с обычными якорями:
$('a[href^="#"], a[href^="."]').click(function () { // если в href начинается с # или ., то ловим клик
var scroll_el = $(this).attr('href'); // возьмем содержимое атрибута href
if ($(scroll_el).length != 0) { // проверим существование элемента чтобы избежать ошибки
$('html, body').animate({
scrollTop: $(scroll_el).offset().top
// по желанию вычитаем высоту навбара: '- $('nav').height();'
}, 500); // анимируем скроолинг к элементу scroll_el
}
return false; // выключаем - стандартное действие
});
Дай бог тебе всего хорошего, добрый человек!
как называется тема саблайма?
Monokai
чет не хочет
Мет эмет.
ниче не понял(
У меня так не работает
у тебя встроенный css или вроде того? непонятно начинающему
var, onclick в 2020 году, чему ты учишь??? Гоша ты не делай из людей гавнокодеров!
Какой мерзкий голос и манера речи )