Скролл наверх jquery. Анімований перехід на верх сторінки

Пропоную вашій увазі скрипт, який плавно прокручує сторінку наверх при кліці на відповідне посилання. Я зробив 2 варіанти: на чистому JavaScript і на jQuery. Вибирайте той, який вам більше до душі.

Варіант на JavaScript

Код скрипта:

var t; function up () (var top \u003d Math.max (document.body.scrollTop, document.documentElement.scrollTop); if (top\u003e 0) (window.scrollBy (0, -100); t \u003d setTimeout ( "up () ", 20);) else clearTimeout (t); return false;)

Число -100 - це кількість пікселів, яке прокручується вгору через кожні 0,02 секунди (число 20).

наверх

Варіант на jQuery

Код скрипта:

(Function ($) ($ (function () ($ ( "# up"). Click (function () ($ ( "html, body"). Animate ((scrollTop: 0), 500); return false;) ))))) (jQuery)

Число 500 - це час, протягом якого відбувається анімація (прокрутка), в даному випадку це півсекунди.

У підходяще місце html-коду сторінки необхідно додати таку посилання:

наверх

У разі, якщо в браузері відключений JavaScript, при кліці на дане посилання сторінка також прокрутиться наверх, але тільки вже не плавно.

На численні прохання я написав урок по створенню переходу на верх сторінки, як на сайті Web Designer Wall. Це дуже просто зробити за допомогою jQuery (якихось пару рядків коду). Необхідно порівняти значення позиції верхньої смуги прокрутки з певним значенням, і якщо перше з них більше, відобразити кнопку переходу на верх. Як тільки користувач клацає по кнопці, відбувається перехід на верх сторінки.

А що, якщо JavaScipt не підтримує?

Зауважте, що кнопка переходу на верх посилається на якір #top, який є ідентифікатором тега body. В принципі, немає необхідності ставити будь-яку посилання-якір, так як jQuery дозволяє прокручувати на будь-яку частину сторінки. Проте краще її все-таки поставити на випадок, якщо JavaScript не підтримуються в тому чи іншому браузері.

Добридень! Приклад скрипта можна подивитися в цьому блозі, коли ви прокручуєте сторінку вниз, в правому нижньому кутку з'являється картинка-кнопка "Вгору", натиснувши на яку ви потрапите до верхньої шапці сайту.

Під кожним прикладом з картинкою ви знайдете код (скрипт), який треба вставити перед закривається тегом ""

Три невеликих моменту для коректної установки:

Кодування сайту повинна бути в UTF-8, Якщо буде інша то замість російських букв - будуть незрозумілі крякозяблікі
Треба щоб на сайті була підключена бібліотека jquery. Підключити її можна вставивши в шаблоні сайту перед "" Наступного код:
Якщо у вас на сайті в дизайні прописаний z-index ( ознака - не видно картинку (Або видно, але тільки на деяких ділянках сайту)), вам треба прописати в стилях до сайту наступний рядок: #topcontrol (z-index: 9999;)
Якщо потрібно изменть положення картинки то скористайтеся стилем margin: #topcontrol (margin-bottom: 50px;)

Js "\u003e

0.js "\u003e

1.js "\u003e

2.js "\u003e

3.js "\u003e

4.js "\u003e

Js "\u003e

6.js "\u003e

7.js "\u003e

8.js "\u003e

9.js "\u003e

0.js "\u003e

1.js "\u003e

2.js "\u003e

3.js "\u003e

4.js "\u003e

5.js "\u003e

6.js "\u003e

7.js "\u003e

Проста кнопка "Вгору" без JavaScript

Існує дуже простий спосіб надати користувачеві такий функціонал. Цей спосіб не вимагає задіяння будь-яких бібліотек або додаткових скриптів і робиться виключно за допомогою HTML і при бажанні з залученням CSS, шляхом створення звичайної внутрішньої посилання.

Для того, щоб це зробити в будь-якому місці, внизу вашої сторінки, просто додайте наступний код:

У стилі вашого сайту, зазвичай вони знаходяться в файлі style.css треба вставити: .topbutton (width: 100px; border: 2px solid #ccc; background: # f7f7f7; text-align: center; padding: 10px; position: fixed; bottom : 50px; right: 50px; cursor: pointer; color: # 333; font-family: verdana; font-size: 12px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;)

недоліки:

Кнопки зроблені із застосуванням JavaScript можуть бути плаваючими і з'являтися відразу як тільки користувач спустився трохи в низ по сторінці, а в наведеному прикладі вона буде відображатися постійно.

Прокрутка не буде плавною і після натискання користувач буде миттєво перенаправлений вгору сторінки.

Плюси даного виду кнопки:

Для роботи кнопки не потрібно задіяти скрипти і великі, за обсягом, бібліотеки. І це дуже великий плюс.

Кнопки прокрутки вгору і вниз на JQUERY

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

Назва: Кнопки прокрутки вгору і вниз на JQUERY
Посилання: 57.72 KB
Формат: ZIP архів

У викачаному архіві будуть знаходиться все файли необхідні для функціонування кнопки. Це CSS, JS файли і файліки зображень стрілок.

Кнопка плавного прокручування вгору за допомогою JQuery

Ще один варіант організації плавної прокрутки вмісту сторінки, з низу вгору, за допомогою JQuery. Кнопка знаходиться в правій нижній частині сторінки і з'являється тільки якщо трохи проскроліть сторінку вниз. Все реалізовано за допомогою невеликого шматочка CSS і JS коду, а так само невеликої картинки використовується в якості кнопки.

Мені ця кнопка подобається тим, що для її створення не потрібно велику кількість скриптів при цьому вона має непогані ефекти.

Тепер розберемося, що потрібно зробити для підключення кнопки до сайту

зображення:

Вам знадобиться зображення самої кнопки можете взяти будь-який, а можете використовувати ось це:

HTML код:

Для виклику кнопки після основного контенту сторінки або перед тегом розмістіть наступний HTML код:

CSS стилі:

Scrollup (width: 40px; height: 40px; opacity: 0.3; position: fixed; bottom: 50px; right: 100px; display: none; text-indent: -9999px; background: url ( "icon_top.png") no-repeat ;)

За допомогою цього коду крім зовнішнього вигляду ми визначаємо позицію кнопки і задаємо відступи 100 px з права і 50 px знизу. Його найкраще додати в файл стилів вашого сайту.

Для початку підключаємо бібліотеку, якщо вона ще не підключена для вашого сайту. Для цього між тегами ...? вставляємо наступне:

Потім відразу після підключення бібліотеки необхідно розташувати наступний код JQuery:

Перший ScrollTop - визначає поточне вертикальне положення смуги прокрутки і якщо воно стає більше 100 px, то автоматично з'являється кнопка. Якщо хочете щоб вона з'являлася раніше або пізніше змінити в необхідну сторону це значення.

Як ви бачите є ще два параметри - 0 - значить сторінка буде прокручена вгору до самого початку до нульового пікселя, а 600 - це швидкість анімації в мілісекундах.

Як все починалося
HTML код кнопок:

вгору

вниз

CSS стилі:
#up
{
width: 60px;
height: 60px;
position: fixed;
bottom: 50px;
left: 20px;
background-color: # 000000;
border-radius: 30px;
}
#down
{
width: 60px;
height: 60px;
position: fixed;
bottom: 50px;
left: 90px;
background-color: # 000000;
border-radius: 30px;
}
.pPageScroll
{
color: #FFFFFF;
font: bold 12pt "Comic Sans MS";
text-align: center;
}
У підсумку ми маємо два кола з написами «Вгору» і «Вниз» в лівому нижньому кутку браузера.

проблеми починаються

Тепер починається найцікавіше - JavaScript, а точніше jQuery. Як відомо, для організації скролінгу виконуються маніпуляції над властивостями scrollTop і scrollLeft. В jQuery ці маніпуляції здійснюються за допомогою методов.scrollTop () і.scrollLeft () відповідно. Нас цікавить только.scrollTop.
Перший, найпростіший варіант скролінгу виглядав наступним чином:

// Обробка натискання на кнопку "Вгору"
$ ( "# Up"). Click (function () (
// Необхідно прокрутити в початок сторінки
$ ( "Body"). Animate (( "scrollTop": 0), "slow");
});

// Обробка натискання на кнопку "Вниз"
$ ( "# Down"). Click (function () (
// Необхідно прокрутити в кінець сторінки
var height \u003d $ ( "body"). height ();
$ ( "Body"). Animate (( "scrollTop": height), "slow");
});

Все, ну дуже просто й невигадливо. Але, от біда, якщо в Chrom'е все було досить безхмарно і симпатично, в Oper'е теж досить непогано (прокрутка вгору здійснювалася миттєво), то «ВреднийЛіс» Скрол відмовлявся геть. Не довго думаючи, замінивши в рядку: $ ( «body»). Animate «body» на «html», я змінив ситуації кардинально: FireFox заробив, Opera перестав ривком прокручувати вгору і став робити це плавно, але тепер уже Chrome перестав реагувати на маніпуляції з кнопками. З наведених вище поневірянь пішов наступний варіант перетравлюється усіма браузерами: $ ( «html, body»). Animate ... Інших прийнятних способів здійснювати скролінг, що працюють у всіх браузерах знайдено не було.

Додамо витребеньок і бантиків

З найпростішою частиною розібралися. Базовий функціонал отримано, тепер можна придумати, що-небудь цікавіше. Перше ж, що кидається в очі, так це швидкість скролінгу. При наявності хоч би то ні було насиченого контенту, використання скролінгу стає справжнім тестом на схильність до епілепсії. Тому, хочеться, щоб скролінг був більш плавним. Рішення в лоб, задати певну константу часу за яке повинен здійснюватися скролінг. Очевидний плюс: елементарність рішення. Не менш очевидний мінус: ніяк не враховується обсяг контенту. Розумне рішення: обчислювати час виконання скролінгу в залежності від розміру контенту. Приступимо.
У код обох кнопок потрібно дописати, обчислення поточної позиції. Для цього якраз і використовується jQuery () метод.scrollTop ().
Тут, з'являються вже відомі проблеми: $ ( «body»). ScrollTop () працює тільки в Chrome, $ ( «html»). ScrollTop () не працює в Chrome. Що, взагалі кажучи, дивує, так як виходить, що конструкцією $ ( «body»). Animate (( «scrollTop»: height), "slow") в Opera ми можемо скролить body, а при отриманні, властивість scrollTop тега body одно нулю, що, судячи з опису element. scrollTop справедливо для елементів, які скролить не можна.
Варіант $ ( «body, html»). ScrollTop () зі зрозумілих причин нам не підходить. Шукаємо альтернативи. Виявляється, поточну позицію можна отримати з об'єктів window і document, так щоб це влаштовувало все браузери. Думаю, слід згадати, що використання їх для анімації (наприклад ось так: $ (document) .animate.), Ні до чого доброго не приводить.
Отже, за робочий варіант з'ясування поточної позиції приймемо: $ (document) .scrollTop ();
Тепер замислимося над тим, як ми будемо обчислювати час. Взагалі кажучи рішення тривіальне і відомо кожному: час \u003d шлях / швидкість. Для визначення шляху, нам якраз і потрібна поточна позиція. Також, потрібні координати точки призначення. З кнопкою «Вгору» все просто, координата точки призначення по вертикальній осі дорівнює нулю, значить, шлях дорівнює сучасному стану. Для кнопки «Вниз» все трохи складніше, нам потрібно отримати «висоту» документа. Уже смакуємо проблеми, так? Але немає, тут все виявляється дуже просто. Цілком потрібну висоту можна отримати використовуючи в якості селектора «body», «html» або document.
Так. У нас є шлях, тепер потрібна швидкість. Тут уже все залежить особисто від вас. Шляхом візуальних прикидок, мені здалася комфортною швидкість 1.73 (цифра не має під собою ніякого, як би там не було серйозного обгрунтування і прикидалася на око).

підсумковий варіант

Таким чином, робочий код виглядає наступним чином:

$ (Document) .ready (function () (
// Обробка натискання на кнопку "Вгору"
$ ( "# Up"). Click (function () (
// Необхідно прокрутити в початок сторінки

var scrollTime \u003d curPos / 1.73;
$ ( "Body, html"). Animate (( "scrollTop": 0), scrollTime);
});

// Обробка натискання на кнопку "Вниз"
$ ( "# Down"). Click (function () (
// Необхідно прокрутити в кінець сторінки
var curPos \u003d $ (document) .scrollTop ();
var height \u003d $ ( "body"). height ();
var scrollTime \u003d (height-curPos) /1.73;
$ ( "Body, html"). Animate (( "scrollTop": height), scrollTime);
});
});

Додатково, можна навішати коефіцієнти, на які б помножается час або швидкість в залежності від шляху для забезпечення більшої гнучкості, але на цьому я вже не буду зупинятися.

резюме

У підсумку ми отримали дуже просту реалізацію скролінгу сторінки, яка працює в будь-якому сучасному браузері.
Випробування проводилися для DOCTYPE: XHTML 1.0 Strict в браузерах Chrome 10, Opera 10, Opera 11, Firefox 4, Internet Explorer 8, Internet Explorer 9.

Деякі проблеми:

border-radius як відомо в IE8 не працює, але кроссбраузерность верстки це не тема даного топіка.
У Opera 10 інструкція: $ ( «body, html»). Animate (( «scrollTop»: 0), scrollTime); призводить до моментального переходу в початок сторінки. Ця проблема зникає з переходом на Opera 11.

UPD: Поправлений підсумковий приклад.

Привіт друзі. Сьогодні я продовжую ділитися з вами корисними скриптами, а якщо говорити конкретно, то я розповім вам історію про появу на моєму блозі кнопки вгору. Мене вже давно просили написати, як зробити таку ж кнопочку, але мені було шкода «палити контору», але сьогодні я раптом передумав ...

Так-то нічого нового я не розповім, адже в мережі можна знайти ще 100500 статей про те, як зробити кнопку вгору для сайту, на цьому б і варто було закінчити сьогоднішній пост, якби не одне АЛЕ! Моя кнопка незвичайна, не така як у всіх - у мене кнопка від самого Яндекса ... зараз-зараз я все розповім :)

Якось спочатку так склалося, що при веденні блогу я вирішив відмовитися від посторінкового розбивки коментарів до постів. Не знаю чому, може не хотів плодити зайвих сторінок, а може і не вірив, що у мене може бути більше 50 коментарів до одного посту, так чи інакше, свою думку я не змінив досі - все коментарі до постів виводяться однією сторінкою. Однак, от халепа, деякі пости на моєму блозі набрали вже більше 500 коментарів, і це не дивлячись на те, що я раз в місяць їх підчищати. Коротше, це була передісторія - а результат такий, що довелося додати на блог кнопку вгору. В результаті навігація по довгих постів з коментарями значно спростилася.

Кнопку або сам скрипт я навіть не шукав, все це саме попалося мені на очі - на одному з сервісів Яндекса, на жаль, не пам'ятаю на якому. Але роздумувати я не став - раз дають треба брати!

Мені дуже подобається вислів «Хороші художники копіюють, а геніальні - крадуть», але ось я хоч і не художник, але краду геніально :) Так, кнопку, яку ви бачите на моєму блозі, я поцупив з Яндекса. Я не хотів користуватися чиїмись інструкціями і скриптами, вони все якісь стрьомні, а тут раз вже сам Яндекс користується даним скриптом, значить він кращий.

NB: це не перша річ, яку я «запозичив» у Яндекса, місяць назад я виявив на одній з промо-сторінок «секретні» кнопки шаринга, про що.

15 хвилин колупаній вихідного коду і все вихідні у мене! Але я вас врятую від цього неподобства, з моєї інструкцією ви зможете всього за 2 хвилини отримати красиву і працюючу кнопочку!

Установка кнопки «вгору» на будь-який сайт

Дійсно, додати даний скрипт можна без проблем на будь-який сайт або будь-яку CMS, та що там - хоч на чистий html хоумпейдж. Найголовніше і єдина умова - у вас повинна бути підключена jQuery бібліотека.

Оригіналів вихідного коду Яндекса я не зберіг, так як при додаванні на блог я відразу міняв деякі стилі і настройки. Але повірте, в процесі інтеграції все стало тільки краще!
Отже, приступимо до встановлення:

Крок 1. Додаємо JavaScript в шаблон сайту, перед закриває тегом

< script type= "text/javascript" > $ (Document) .ready (function () ($ (window) .scroll (function () (if ($ (this) .scrollTop ()\u003e 0) ($ ( "# scroller") .fadeIn ();) else ($ ( "# scroller") .fadeOut ();))); $ ( "# scroller") .click (function () ($ ( "body, html") .animate ((scrollTop: 0), 400) ; return false;));));

Наприклад, для WordPress треба буде редагувати файл шаблону header.php, а в DLE необхідно буде додавати код в шаблон main.tpl.

Крок 2. Додаємо html-код в шаблон сайту перед закриває тегом

<div id \u003d "scroller" class \u003d "b-top" style \u003d "display: none;" \u003e наверх</ Span\u003e

Знову ж таки, в WordPres треба редагувати файл footer.php, а для DLE знову main.tpl.

Крок 3. Додаємо CSS-стилі блоку і кнопки вгору в файл style.css (Назва файлу style.css у вас може бути і іншим, але це не важливо, додайте код в будь-який файл стилів, який підключається до сайту).

.b-top (z-index 2600; position: fixed; left: 0; bottom: 90px; width: 34%; margin-left: 50%; opacity: 0.5; filter: alpha (opacity \u003d 50);). b-top: hover (opacity: 1; filter: alpha (opacity \u003d 100); cursor: pointer;) .b-top-but (z-index 2600; position: absolute; display: block; left: 56px; bottom : 0; margin: 0 0 0 100%; padding: 32px 12px 4px; color: white; background: # D8D5C2 url ( https: //сайт/wp-content/plugins/goupbutt/b-j-top.png) No-repeat 50% 11px; border-radius: 7px; )

B-top (z-index 2600; position: fixed; left: 0; bottom: 90px; width: 34%; margin-left: 50%; opacity: 0.5; filter: alpha (opacity \u003d 50);) .b -top: hover (opacity: 1; filter: alpha (opacity \u003d 100); cursor: pointer;) ..png) no-repeat 50% 11px; border-radius: 7px;)

Як бачите, я навіть url фонової картинки зі стрілкою не став міняти, залишив подгрузку з яндексовского серверів. На Яндексі пропала картинка, вказав шлях до картинки на своєму сервері, а вам рекомендую її зберегти до себе, буде надійніше.

Що тут можна налаштувати і змінити під себе:

bottom: 90px; - зміщення блоку з кнопкою щодо низу сторінки;
width: 34%; margin-left: 50%; - ось з цими параметрами вам доведеться поворожити, тому що чіткої інструкції тут бути не може. Дані значення я виявив експериментально, перевіряючи положення кнопки на різних дозволах екрану саме для мого шаблону на блозі. Чого і вам рекомендую;
padding: 32px 12px 4px; - за допомогою цих значень ви можете регулювати розмір блоку з кнопкою, керуючи відступами щодо напису «вгору». 32px - відступ зверху, 12px - відступи зліва і справа, 4px - відступ знизу;
color: white; - колір напису «вгору»;
border-radius: 7px; - це css3 стиль, який відповідає за закруглення країв блоку.

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

Дякую за увагу, друзі. Користуйтеся скриптом, задавайте питання в коментарях, і пишіть свої пропозиції та побажання.