jQuery сниппеты: плавная прокрутка страниц

Предлагаю сниппет для плавной прокрутки страницы к заданному месту при клике по ссылке. При отключенном javascript данный вариант тоже работоспособен, так как использует простые якоря HTML.

Тегу, к которому мы хотим произвести прокрутку, необходимо дать имя и уникальный идентификатор. Таким тегом, например может служить

:

...
<body id="top" name="top">
...
</body>
...

Создаём ссылку, при нажатии на которую будет осуществлён переход к нашей метке (тегу <body>) и добавим соответствующий класс:

<a href="#top" class="scrollto">Наверх страницы ↑</a>

Теперь пишем небольшой сниппет на jQuery и наслаждаемся результатом:

jQuery(document).ready(function() {
	jQuery("a.scrollto").click(function () {
		elementClick = jQuery(this).attr("href")
		destination = jQuery(elementClick).offset().top;
		jQuery("html:not(:animated),body:not(:animated)").animate({scrollTop: destination}, 1100);
		return false;
	});
});

Допилил немного: обернул все в bind, убрал проверку анимации, заменив ее на отключение оной (метод stop)

Теперь ссылка выглядит просто:

<a href="#top">Наверх страницы ↑</a>

и соответствующий JavaScript:

$("a[href*=#]:not([href=#])").bind('click', function (event) {
	var thisHash = this.hash;
	var targetOffset = $(thisHash).offset().top;
	$("html,body").stop().animate({ 
		scrollTop: targetOffset
	}, 1100 );
	location.hash = thisHash;
	event.preventDefault();
});

Реализацию данного метода вы можете наблюдать на этом блоге — прокрутите страницу вниз

Источник: https://www.kobzarev.com/jquery/jquery-snippets-smoothscroll-pages/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: