Плавный переход к «Якорным» (anchor) ссылкам
В настоящее время все большую популярность набирают сайты по типу Лэндинг. Прокрутка страницы имеет большое значение и повышает юзабилити сайта.
Как Вам известно, при нажатии на якорную ссылку из пунктов меню в конструкторе uKit скролл страницы происходит плавно, но, если мы сделаем якорную ссылку из кнопки, изображения или текстовой ссылки, нас перекидывает на ту часть страницы с которой эта ссылка связана и сам переход происходит мгновенно, без плавной прокрутки страницы и этот нюанс мы с вами исправим.
Для того чтобы реализовать плавный переход после нажатия по ссылке, Вам необходимо будет установить следующий скрипт.
Установка
Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
require(['jquery'], function ($) {
$(function(){
$('a[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) {
var targetOffset = $target.offset().top - ($(".ul-w-mainmenu-nav").outerHeight(true)+ 20);// Высота от заголовка в px
$('html,body').animate({scrollTop: targetOffset}, 400); //Скорость прокрутки
return false;
}
}
});
});
})
</script>
Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.
Чтобы при нажатии по ссылке мы переходили к определенному блоку, без виджета заголовок воспользуйтесь следующим лайфхаком.
| Всего комментариев: 0 | |