Скрипты для uKit 24.09.2017 0 590
Плавный переход к «Якорным» (anchor) ссылкам

Плавный переход к «Якорным» (anchor) ссылкам

В настоящее время все большую популярность набирают сайты по типу Лэндинг. Прокрутка страницы имеет большое значение и повышает юзабилити сайта.

Как Вам известно, при нажатии на якорную ссылку из пунктов меню в конструкторе uKit скролл страницы происходит плавно, но, если мы сделаем якорную ссылку из кнопки, изображения или текстовой ссылки, нас перекидывает на ту часть страницы с которой эта ссылка связана и сам переход происходит мгновенно, без плавной прокрутки страницы и этот нюанс мы с вами исправим.

 

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

 


 

Установка

Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
 

Код
<script>
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>». (скриншот).
Сохраните код и опубликуйте ваш сайт.

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


Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 0
avatar