Делаем плавный скролл по якорям на странице



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

Данный скрипт требует наличия подключенной библиотеки jquery на странице. Если у вас DLE шаблон, то библиотеку подключать не нужно!

Установка (на DLE шаблон)
Открываем 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" вот и всё!

Надеюсь статейка будет полезна ;)скачать dle 11.1смотреть фильмы бесплатно


Внимание!

Ознакомьтесь со статьёй по ссылке ниже.

Сайт мошенников
Информация