Август 2017
Автор: Рубрика: Верстка Комментариев нет

Плавная навигация для лендинга и кнопка наверх


Плавная навигация для лендинга и кнопка наверх

Делаем плавный скролл до блока.

Нам понадобится плагин с названием PageScroll2id, подключим его после jquery в чистый шаблон.

Скачать плагин можно с официального сайта или по этой ссылке.

Создаем в body навигацию.

Сделаем header с id=top.

Вложено будет nav с классом top_nav и три перечисления ссылок тега a, ведущих на секции.

Добавим стилей в main.sass.

Нам понадобится плагин с названием PageScroll2id

Добавляем секции для навигации

Создаем три секции с id=s1,2 и 3.

Внутри секций вставим текстовый контент loremru7.

В стилях зададим расстояние между секциями min-height: 500px и нарисуем линию, чтобы видно были границы между секциями border-bottom: 1px solid #c3c3c3.

Добавляем секции для навигации

Открываем файл coomon.js

Пишем $(.top_nav a).mPageScroll2id ();

Сохраняем, пробуем нажать на ссылку меню и видим плавный переход к секциям.

Чтобы начало секций не заезжало за меню отвечает параметр offset : 50.

Сделаем кнопку подняться вверх

Зададим див с классом topb и сделаем ссылку на класс, который вверху.

Зададим стили в main.sass.

Также класс topb добавим через запятую в скрипт $(.top_nav a, .topb).

Сделаем кнопку подняться вверх

Подсветим ссылку меню

Например, есть задача, перешли во вторую секцию и хотим, чтобы ссылка меню стала выделенной.

Подсветим ссылку меню

Код, который получился в index.html

Код в main.sass.

Комментариев нет