Плавный скроллинг страницы на jquery? Как сделать без знаний

В этой статье я постараюсь объяснить, как можно сделать плавный скроллинг страницы с помощью jquery плагина, даже если ваши знания в веб-программировании очень слабы. Вообще вся необходимая информация есть в этом видео, советую его посмотреть:

Речь в нем идет о jquery-плагине scroll2id, его установке и настройке. Исходники к этому уроку вы можете скачать здесь.

Теперь я немного объясню саму суть для тех, кто не смотрел видео. Сам плагин сначала нужно скачать где-нибудь из просторов интернета. Я вам советую просто скачать исходник. Там есть и плагин, и сама jquery. Для работы плавного скроллинга нужно подключить и то, и другое. В частности, вот такой строчкой в исходнике подключается плагин:

<script src="libs/PageScroll2id/PageScroll2id.min.js"></script>

Если вы хотите отредактировать страницу на свое усмотрение, то откройте в исходнике файлы index.html и main.css в папке css.

В первом файле вы увидите разметку элементов веб-страницы. В частности, в теге header заключено меню, а далее идут секции, к которым и будет организован плавный скроллинг. Если вы щелкните по пункту меню, то произойдет плавная прокрутка до указанной секции.

Само меню выглядит так:

Как видите, я его уже немного переделал, так как было совсем скучным. Для этого необходимо открыть файл main.css, где содержатся основные стили страницы. В ней я прописал следующее:

Цвет ссылок по умолчанию. Можно задать любой другой либо уточнить селектор. Подробнее о селекторах читайте здесь.

Это я добавил стиль, отвечающий за фоновый цвет всей полосы навигации. Все остальные стили, прописанные в этом селекторе трогать не нужно, все они нужны.

Также есть стилевые классы, которые добавляет сам плагин. В частности, чтобы ссылка на активную секцию подсвечивалась оранжевым цветом, я прописал следующее:

Именно такой стилевой класс отвечает за это. Вы можете заменить цвет и убедиться в работоспособности всего этого.

Как добавлять новые пункты меню и секции

Пожалуй, это главный вопрос, потому что именно он позволит вам создать полноценный лендинг на основе того шаблона, который вы скачали. Делать это очень просто. В блок с меню нужно просто добавить новый пункт списка со ссылкой. Для этого просто скопируйте предыдущий пункт, изменив атрибут href у ссылки и анкор.

В атрибуте href вы должны прописать id секции. Для простоты, как видите, они названы однотипно. Кстати, если работаете в Notepad++ как я, то просто на нужной строке жмите Ctrl + D и она будет скопирована и вставлена автоматом.

Наконец, когда ссылка на новую секцию создана, остается создать саму секцию. Это еще проще, делается так:

<section id = "название секции">Содержимое</section>

Ну а в содержимое уже вставляете то, что нужно. Собственно, вот так вот все работают. Надеюсь этих небольших объяснений с моей стороны вам хватит, чтобы разобраться. Если нет — буду рад услышать вопросы в комментариях. На основе скачанного шаблона и указанных инструкций вы вполне можете создать неплохой лендинг, это я гарантирую!