Suitcase. 5 самых нужных эффектов на jQuery в одном скрипте

Как создать простую, плавную прокрутку к блоку по клику и по ссылке GET (якорь) 

Шаг 1 Вставка кнопки для прокрутки по клику

Если Вы хотите добавить новый объект то добавьте кот в нужно место

<div class="scrollbt" data-kuda="box">
 контент
</div>

Обратите внимание на свойство data-kuda. В нем задается ID блока к которому будет сделана прокрутка после клика. Такой блок будет выглядит примерно так:

<div id="box">
 Вы доскрулили
</div>

Если у Вас уже есть готовый код то достаточно ему задать класс scrollbt и свойство data-kuda=»box»

Шаг 2 Реализация прокрутки при переходе по ссылке. Метод GET

В начале пару слов о самом методе GET. Вы наверняка замечали ссылки вида:

 

 

http://site.ru/?name=value

 

 

Название метода передачи значения переменной через ссылку называется GET

Более подробнее метод GET Я опишу его в следующей статье и покажу его работу на интересных примерах

Шаг 1 Создадим блок к которому будет реализована прокрутка

Вставим код

<div id="box">
 Вы доскрулили
</div>

где ID это уникальное имя на странице

Шаг 2 Создадим приставку для ссылки

Добавьте код блока с уникальным id на страницу. Например:

<div id="toscrull">
 Вы доскрулили
</div>

Скрипт использует переменную с названием getanchor. Следует добавить к ссылке значение это переменной в котором указано ID нужного блока.

Рассмотрим на примере. Допустим что http://site.ru/ это Ваш сайт.

Целевой блок с id находится на главной странице.

Что бы сделать прокрутку к этому блоку при заходе на http://site.ru/ модифицируем нашу ссылку

 

 

http://site.ru/?getanchor=toscrull

 

 

Получается, что бы сделать прокрутку надо добавить ?getanchor=toscrull к ссылку на страницу на которой находится блок, где toscrull это ID блока который находится на открываемой странице

Пример можно увидеть на моей странице заказа сайта под ключь.

Если перейдете по ссылке вида http://mexalim.com.ua/zakazat-sajjt/ то ничего не произойдет, а если по ссылке вида http://mexalim.com.ua/zakazat-sajjt/?getanchor=otziv то при открытии страницы Вы сразу увидите отзывы моих клиентов.

Понравилась статья? Ставь лайк.

Похожие материалы

Обсуждения

Оставьте свой Email И мы обсудим Вашу идею
*P.S.:Не работаю с бюджетами менее чем 600$