Skip to main content

Плавный якорь jQuery

Плавный якорь jQuery

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

Обычно якорная ссылка содержит в атрибуте href ID элемента назначения со знаком решетки вначале #. Например:

<a href="#block">Ссылка на элемент</a>
<div id="block"></div>

При нажатии на ссылку будет резкий переход к назначенному элементу. Чтобы прокрутка была плавной, добавляем код представленный ниже.

Подключаем библиотеку jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Код JavaScript

<script>
$(function(){
	$('a[href^="#"]').click(function () {
		elementID = $(this).attr("href");
		position = $(elementID).offset().top;
		if($.browser.safari){
			$('body').animate({scrollTop: position}, 500);
		} else {
			$('html').animate({scrollTop: position}, 500);
		}
		return false;
	});
});	
</script>

Вот и все. Теперь при нажатии на любые ссылки содержащие якорь будет происходить плавная прокрутка к указанному в них месту на странице.

Похожие записи
Сохранение данных в форме после обновления страницы

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия... Читать далее

Кастомный виджет переводчик для сайта с флагами

Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню... Читать далее

AJAX в 1C-Битрикс

В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например... Читать далее

Отправка письма с вложениями на PHP и AJAX

Мы уже рассматривали, как сделать форму обратной связи на PHP и Ajax. Сегодня мы модернизируем... Читать далее

Простая пагинация на PHP и MySQL

Это руководство о том, как сделать простое разбиение на страницы, используя PHP и MySQL с... Читать далее

Всплывающее окно при закрытии страницы

Стоп-форма - это всплывающее окно, призывающее к действию, которое открывается через определенное время нахождения пользователя... Читать далее

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

*

code