Делаем плавный скролл до блока.
Нам понадобится плагин с названием PageScroll2id, подключим его после jquery в чистый шаблон.
Скачать плагин можно с официального сайта или по этой ссылке.
Создаем в body навигацию.
Сделаем header с id=top.
Вложено будет nav с классом top_nav и три перечисления ссылок тега a, ведущих на секции.
Добавим стилей в main.sass.
Содержание статьи
Добавляем секции для навигации
Создаем три секции с id=s1,2 и 3.
Внутри секций вставим текстовый контент loremru7.
В стилях зададим расстояние между секциями min-height: 500px и нарисуем линию, чтобы видно были границы между секциями border-bottom: 1px solid #c3c3c3.
Открываем файл coomon.js
Пишем $(.top_nav a).mPageScroll2id ();
Сохраняем, пробуем нажать на ссылку меню и видим плавный переход к секциям.
Чтобы начало секций не заезжало за меню отвечает параметр offset : 50.
|
1 2 3 4 5 |
$(function() { $(".top_nav a").mPageScroll2id({ offset : 50 }); }); |
Сделаем кнопку подняться вверх
Зададим див с классом topb и сделаем ссылку на класс, который вверху.
Зададим стили в main.sass.
Также класс topb добавим через запятую в скрипт $(.top_nav a, .topb).
Подсветим ссылку меню
Например, есть задача, перешли во вторую секцию и хотим, чтобы ссылка меню стала выделенной.
Код, который получился в index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<header id="top"> <nav class="top_nav"> <ul> <li><a href="#s1">Ссылка1</a></li> <li><a href="#s2">Ссылка2</a></li> <li><a href="#s3">Ссылка3</a></li> </ul> </nav> </header> <section id="s1"> Далеко-далеко за словесными горами в стране. </section> <section id="s2"> Далеко-далеко за словесными горами в стране. </section> <section id="s3"> Далеко-далеко за словесными горами в стране. </section> <a href="#top" class="topb"><i class="fa fa-arrow-up" aria-hidden="true"></i></a> |
Код в main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.top_nav position: fixed background-color: #FFF text-align: center width: 100% line-height: 40px top: 0 border-bottom: 1px solid #s3s3s3 .top_nav ul, .top_nav li margin: 0 padding: 0 list-style: none .top_nav li display: inline-block margin: 0 20px section min-height: 500px border-bottom: 1px solid #c3c3c3 .topb bottom: 20px right: 15px width: 40px height: 40px background: green text-align: center line-height: 45px position: fixed font-size: 30px color: blue .mPS2id-highlight background-color: #FFF color: blue |