Плавная прокрутка между ссылками внутри страницы

Плавный переход между ссылками в рамках одной страницы — полезный эффект, который добавит вашему сайту лоска. Это удобно если: текст длинный и его хочется разбить на разделы, вы хотите ссылаться на форму комментирования или любой другой объект находящийся на странице.

К конструктору uCoz и uWeb уже подключена библиотека JQuery, а значит вы можете реализовать подобный эффект без особого труда.

Вы можете посмотреть «Демо», чтобы понять, что вы получите, установив всего несколько строчек кода на свой сайт.

Код


Варианты установки кода:
  • Установите приведённый ниже код в глобальный блок «Нижняя часть сайта» или любой другой глобальный блок, который расположен до закрывающего тега </body>. В этом случае эффект будет работать на всех страницах сайта.
  • или
  • Установите код на нужную страницу сайта в режиме HTML редактора или в режиме визуального редактора, воспользовавшись кнопкой «источник».
<script> /* Подробнее на uCodes.ru */
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000); /* Скорость анимации */
return false;
}
}
});
</script>

Как это работает


Якорь – это закладка с уникальным идентификатором на определенном объекте веб-страницы, к которому можно перейти по ссылке. Ссылка перенаправляет пользователя не на другую веб-страницу, а на определенное место страницы на которой пользователь в данный момент находится.

Ссылка с якорем оканчивается символом #, после которого идёт идентификатор. Идентификатор создаётся с помощью атрибута id, который может быть задан у любого объекта. Например, мы можем поставить якорь на заголовке третьего блока в длинном тексте :
<h2 id="three">Блок третий</h2>
Соотвественно, сослаться на этот якорь, мы можем по ссылке:
<a href="#three">Скроллить к блоку 3</a>
При клике на такую ссылку браузер найдёт на странице объект с идентификатором id со значением three и прокрутит окно страницы к нему. То есть перезагрузки страницы не произойдёт. А установленный код позволит сделать переход к объекту плавным.

Демо   

egorshorin
26 января 2017


Проект uCodes выставлен на продажу

  • 7+ летняя история домена
  • 117 000 упоминаний в Google
  • 530+ ссылающихся на домен страниц
  • Репутация и известность проекта

Заявка на покупку проекта