Плавная прокрутка до якоря Js || Jquery

Илья Ландар

Сайты, трафик, маркетинг

Плавная прокрутка до якоря Js || Jquery

Автор

Илья Ландар

На чтение

< 1

Просмотров

51 просмотров

Опубликовано

22.04.2020
Время на прочтение: < 1 минуты

Если нужна плавная прокрутка то есть два варианта которыми я пользуюсь.

  • Универсальный Jquery
  • На чистом Js

Универсальный Jquery

Подключаем сначала Jquery, после вставляем в подключенный js файл

var $page = $(‘html, body’);
$(‘a[href*=»#»]’).click(function() {
$page.animate({
scrollTop: $($.attr(this, ‘href’)).offset().top
}, 100); // скорость прокрутки
return false;
});

На чистом Js

var linkNav = document.querySelectorAll(‘[href^=»#id»]’), // добавляем конкретный id к которому хотим совершить прокрутку
V = 1.5; // скорость, может иметь дробное значение через точку
for (var i = 0; i < linkNav.length; i++) {
linkNav[i].addEventListener(‘click’, function(e) {
e.preventDefault();
var w = window.pageYOffset, // прокрутка
hash = this.href.replace(/[^#](.)/, ‘$1’); // id элемента, к которому нужно перейти
t = document.querySelector(hash).getBoundingClientRect().top, // отступ от окна браузера до id
start = null;
requestAnimationFrame(step); // подробнее про функцию анимации [developer.mozilla.org]
function step(time) {
if (start === null) start = time;
var progress = time — start,
r = (t < 0 ? Math.max(w — progress/V, w + t) : Math.min(w + progress/V, w + t));
window.scrollTo(0,r);
if (r != w + t) {
requestAnimationFrame(step)
} else {
location.hash = hash // URL с хэшем
}
}
}, false);
}

See the Pen Плавная прокрутка на чистом js и jquery by Illlya (@Ineye) on CodePen.

Видео на эту тему

Илья Ландар

Веб специалист
Здравствуйте. Я веб разраотчик, в свободное время пишу статьи. Если есть вопросы по созданию сайта можете написать мне

Вам так же может понравиться

< 1 мин

3 просмотров

Уменьшаем вес картинок для оптимизации сайта

Время на прочтение: < 1 минуты Для начала нам нужно понять зачем нам уменьшать вес картинок. Связь такая. Меньше вес

< 1 мин

3 просмотров

Wow js анимация при появлении.

Время на прочтение: < 1 минуты Что бы сделать анимацию при появлении нам нужно. Github — для скачивания архив wowjs

2 мин

9 просмотров

Просто о сео. Тех часть.

Время на прочтение: 2 минут(ы) При знакомстве с сео, сразу осознаешь что это целая наука которая полностью не изучена

< 1 мин

18 просмотров

Css центрирование. Просто выравниваем блоки.

Время на прочтение: < 1 минуты В верстке часто возникает вопрос центрирования. Расскажу в этой статье как я выравниваю блоки