Плавний скролінг до якоря
Добрий день, сьогодні хочу розібрати гарний ефект на jQuery, яке створює плавне переміщення до якоря або внутрішньої посиланням, якщо по-простому.
Так само хороші поради щодо створення сайту. є на блозі Seodiz.ru
Щось подібне ви напевно бачили на сайтах, де реалізовано плавне переміщення сторінки вниз або вгору. Але в цьому уроці ми постараємося реалізувати трохи інше, а точніше зробити плавний скролінг сторінки по розділах. Тобто, припустимо, у вас сторінка FAQ, де спочатку перераховані питання, а внизу відповіді на них. Ось клікаючи з питань, сторінка буде плавно зісковзувати до відповідного відповіді.
Сам список меню в змісті найкраще укласти в
HTML код для скрипта
"Arma uirum", nonne hoc spumosum et cortice pingui ut ramale uetus uegrandi subere coctum? ' quidnam igitur tenerum et laxa ceruice legendum?
Подключяем jQuery
"Arma uirum", nonne hoc spumosum et cortice pingui ut ramale uetus uegrandi subere coctum? ' quidnam igitur tenerum et laxa ceruice legendum?
Я навів не весь список моїх якорів, які я використовую в цій статті, але сподіваюся, ви вловили суть і зрозуміли як побудувати html код для плавного переміщення сторінки до якоря.
Подключяем jQuery
Тепер треба додати динаміку і її нам зробить jQuery, для цього в тезі треба підключити бібліотеку jQuery:
Після цього скачайте сам плагін ScrollTo. який створює плавне переміщення. Підключіть його до сайту:
Цей код задає особисті налаштування скрипта. Цифра 500 - це швидкість переміщення, чим вона більша, тим повільніше буде відбувається скролінг сторінки до якоря.
Приклади роботи плавного скролінгу
Приклад роботи скрипти для плавного переміщення ви можете подивитися прямо на цій сторінці, натиснувши по одному з пунктів тимчасового перебування.
Я так само виклав і вихідні скрипта, тільки завантажити ви його зможете після того, як зробите ретвіт цього поста. Після ретвіти, кнопка для скачування стане відразу активною.