Плавний скролінг сторінки на jquery це просто
Мова в ньому йде про jquery-плагін scroll2id. його встановлення та налаштування. Вихідні тексти до цього уроку ви можете завантажити тут.
Всі ми, вебмастера і розробники, постійно працюємо з сайтами. Хотів би вам порекомендувати майданчики, якими користуюся сам:- Reg.ru - тут реєструю і продовжую доменні імена, дуже надійна компанія!
- HostIQ - хостинг преміум якості.
- Ihor - більш бюджетний, але теж дуже якісний хостинг-провайдер.
- Telderi.ru - єдина надійна біржа в рунеті, на якій можна купити готові сайти з доходом!
Якщо ви хочете відредагувати сторінку на свій розсуд, то відкрийте в исходнике файли index.html і main.css в папці css.
У першому файлі ви побачите розмітку елементів веб-сторінки. Зокрема, в тезі header укладено меню, а далі йдуть секції, до яких і буде організований плавний скролінг. Якщо ви клацніть по пункту меню, то станеться плавна прокрутка до зазначеної секції.
Саме меню виглядає так:
Як бачите, я його вже трохи переробив, так як було зовсім нудним. Для цього необхідно відкрити файл main.css. де містяться основні стилі сторінки. У ній я прописав наступне:
top_nav background-color: # 0F122E;
>
Це я додав стиль, який відповідає за фоновий колір всієї смуги навігації. Всі інші стилі, прописані в цьому селекторі чіпати не потрібно, все вони потрібні.
mPS2id-highlight color: orange;
>
Саме такий стильовий клас відповідає за це. Ви можете замінити колір і переконатися в працездатності всього цього.
Як додавати нові пункти меню і секції
Мабуть, це головне питання, тому що саме він дозволить вам створити повноцінний Лендінгем на основі того шаблону, який ви завантажили. Робити це дуже просто. У блок з меню потрібно просто додати новий пункт списку з посиланням. Для цього просто скопіюйте попередній пункт, змінивши атрибут href у посилання і анкор.
В атрибуті href ви повинні прописати id секції. Для простоти, як бачите, вони названі однотипно. До речі, якщо працюєте в Notepad ++ як я, то просто на потрібному рядку тисніть Ctrl + D і вона буде скопійована і вставлена автоматом.