Я думаю многие из вас видели на сайтах такую фишку, когда кликаешь по кнопке то сайт плавно прокручивался до определенного места на странице. Так вот эта фишка называется "Якорные ссылки". Суть в том чтобы сделать пользование вашим сайтом немного удобней и интересней. Допустим вам нужно обратить внимание пользователей на определенную информацию на странице вашего сайта, то вам просто необходимо установить этот скрипт.
Данный скрипт требует наличия подключенной библиотеки jquery на странице.
Установка
Открываем main.tpl (главною страницу шаблона) и в самый конец где у нас прописаны scriptы дописываем:
<script>
$(document).ready(function(){
$('a[href^="#"], *[data-href^="#"]').on('click', function(e){
e.preventDefault();
var t = 1000;
var d = $(this).attr('data-href') ? $(this).attr('data-href') : $(this).attr('href');
$('html,body').stop().animate({ scrollTop: $(d).offset().top }, t);
});
});
</script>
Скорость прокрутки можно настраивать: var t = 1000; меняем 1000 на нужное нам значение, 1000 равно 1 секунде.
Скрипт также будет работать не только при нажатие на ссылку, можно добавить любому блоку атрибут data-href="#idBlock" и тогда при клике на данный блок произойдет плавная прокрутка до якоря, как и по ссылке.
Как его использовать?
Допустим у вас в меню есть ссылка "Инфо" и вам нужно чтобы при клике по ней страница прокручивалась к блоку с футером.
В таком случае мы берем и добавляем к ссылке атрибут data-href="#info". Затем спускаемся к футеру и к <div > блоку добавляем идентификатор: id="info" вот и всё!
Надеюсь статейка будет полезна😉