7 'Scroll to Top' рішень на jQuery

7 Scroll to Top решений на jQuery

'Scroll to Top' кнопка - додаток для сторінок з великою кількістю контенту і блогів з довгими повідомленнями.

Необхідність використання якорів на сайті виникає дуже часто. В основному, їх використовують у великих веб-документах, які мають зміст у вигляді посилань. По кліку на такому посиланню відбувається миттєвий перехід до певного розділу сторінки. У цій статті я хочу показати як за допомогою невеликого скрипта зробити цей перехід плавним. Тобто замість миттєвого переходу, сторінка буде плавно прокручуватися до потрібного місця. І не важливо де буде знаходитися якір: вище посилання або нижче.

В цьому топі Ви знайдете безліч jQuery рішень, також як і рішень одним кліком, які дозволяють Вашим відвідувачам гладко прокручувати право на початок сторінки, роблячи Ваш веб-сайт більш зручний для користувача.

Спочатку визначимося з тим, що таке якоря (раптом хтось не знає). Якорем називається закладка з унікальним ім'ям на певному місці веб-сторінки, призначена для створення переходу до неї за посиланням.

Для створення якоря слід спочатку зробити закладку в відповідному місці і дати їй ім'я за допомогою атрибута name тега або ж просто привласнити будь-якого тегу атрибут id з бажаним значенням (цей спосіб використовується частіше, тому скрипт буде орієнтований саме на нього). І в першому, і в другому випадку, ім'я якоря повинно бути унікальним в межах сторінки. 

  <a name="razdel1"> </a>
 <Div id = "# razdel1"> ... </ div>

Як значення href для переходу до цього якоря використовується ім'я закладки з символом решітки (#) попереду. 

 <a href="#razdel1"> До розділу 1 </a>

Повернемося до плавним переходам. Отже, скрипт повинен спрацьовувати при натисканні на посилання, у яких атрибут href починається з решітки "#". В jQuery це можна зробити так: 

  $ ( 'A [href ^ = "#"]'). Click (function () {
  // ...
 });

Потім потрібно зберегти значення атрибута href в змінної: 

 var target = $ (this) .attr ( 'href');

Для зміни значення відступу прокрутки зверху будемо використовувати метод scrollTop. Плавність ж буде реалізована функцією animate. Ось такий остаточний вигляд має наш скрипт для плавної прокрутки: 

  $ (Function () {
  $ ( 'A [href ^ = "#"]'). Click (function () {
  var target = $ (this) .attr ( 'href');
  $ ( 'Html, body'). Animate ({scrollTop: $ (target) .offset (). Top}, 300);
  return false; 
  }); 
 });

offset (). top визначає значення відступу зверху для якоря (з id рівному значенням атрибута href), яке встановлюється в scrollTop. В кінці не забуваємо поставити return false, щоб скасувати дію за замовчуванням. Тепер необхідно тільки вставити цей код на потрібні вам сторінки (або підключити окремим файлом) і все запрацює. Успіхів!

Додаткові рішення для плавної прокрутки до заслання ...

1. jQuery topLink Plugin

topLink jQuery plugin розроблений David Walsh, показує спливаючу кнопку "вгору сторінки" коли користувач перемістився вниз сайту.

2. Зникаючий "Scroll to top" link with jQuery and CSS

З докладним описом як створити скрол "вгору сторінки" заснований на CSS and jQuery.

3. Зникаючий "Scroll to top" link with jQuery and CSS

Проста кнопка "вгору сторінки" в правому ніженм куті сайту. Код використовує розробки перших двох Скрол і більш оптимізований, ніж попередні два рішення, але з ефектом загасання і плавною прокруткою.

4. jQuery Plugin: Scroll to Top

Легкий в установці, jQuery скрипт, який додає зникаючу прокрутку на сторінку сайту з анімованої прокруткою, з нормальною посиланням.

5. UItoTop jQuery Plugin

Натхненний прекрасною ідеєю щодо jQuery Девіда Уолша topLink Плагін, Метт Вероун зробив подібний плагін, але з двома основними відмінностями, цей не вимагає для роботи, щоб Ви додали додаткову розмітку html або додаткові плагіни. Це рішення буде працювати, тільки коли у користувача JavaScript включений. Ось! Даний скрипт використовує

6. jQuery Scroll to Top Control v1.1

Цей сценарій виводить на екран стаціонарне управління в правому нижньому кутку сторінки сайту, яке коли натиснути м'яко прокручує сторінку назад до верху. Замість того, щоб завжди бути видимим на екрані користувача, сценарій дозволяє визначати, як далеко нижче (в пікселях) на сторінці користувача показати управління.

7. Паливний GoToTop WordPress plugin

Плавний скрипт прокрутки, розроблений Аріелем Флеслером і Могосану Богдан як плагін для WordPress. На сторінці налаштувань плагіна Ви можете налаштувати css, зникаючу швидкість і мінімальну висоту в пікселях.