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

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

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

Все мы, вебмастера и разработчики, постоянно работаем с сайтами. Хотел бы вам порекомендовать площадки, которыми пользуюсь сам:
  1. Reg.ru - здесь регистрирую и продлеваю доменные имена, очень надежная компания!
  2. HostIQ - хостинг премиум качества.
  3. Ihor - более бюджетный, но тоже очень качественный хостинг-провайдер.
  4. Telderi.ru - единственная надежная биржа в рунете, на которой можно купить готовые сайты с доходом!

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

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

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

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

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

a{
color: #fff;
}

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

.top_nav {
background-color: #0F122E;
}

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

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

.mPS2id-highlight {
color: orange;
}

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

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

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

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

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

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

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: