Найти руководство пользователя
1. Выберите производителя
Плавная прокрутка между ссылками внутри страницы
Плавный переход между ссылками в рамках одной страницы — полезный эффект, который добавит вашему сайту лоска. Это удобно если: текст длинный и его хочется разбить на разделы, вы хотите ссылаться на форму комментирования или любой другой объект находящийся на странице.
К конструктору uCoz и uWeb уже подключена библиотека JQuery, а значит вы можете реализовать подобный эффект без особого труда.
Вы можете посмотреть «Демо», чтобы понять, что вы получите, установив всего несколько строчек кода на свой сайт.
Варианты установки кода:
Якорь – это закладка с уникальным идентификатором на определенном объекте веб-страницы, к которому можно перейти по ссылке. Ссылка перенаправляет пользователя не на другую веб-страницу, а на определенное место страницы на которой пользователь в данный момент находится.
Ссылка с якорем оканчивается символом #, после которого идёт идентификатор. Идентификатор создаётся с помощью атрибута id, который может быть задан у любого объекта. Например, мы можем поставить якорь на заголовке третьего блока в длинном тексте :
Соотвественно, сослаться на этот якорь, мы можем по ссылке:
При клике на такую ссылку браузер найдёт на странице объект с идентификатором id со значением three и прокрутит окно страницы к нему. То есть перезагрузки страницы не произойдёт. А установленный код позволит сделать переход к объекту плавным.
Скачать файлы
К конструктору 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>
$('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>
© ucodes.ru 2019