Кнопка Вгору для WordPress. Варіанти встановлення. Кнопка Вгору для WordPress — швидкий перехід на початок сторінки Кнопка плавного прокручування вгору за допомогою JQuery

Кнопка вгору присутня зараз у багатьох сайтах і допомагає користувачам швидко повернутися до верху сторінки. Це досить зручно, якщо на сайті відображається багато інформації. Тому щоб кожного разу не доводилося прокручувати веб-сторінку назад до початку статті або меню, розробники радять додавати кнопку вгору. Розташовується вона, як правило, у правому нижньому кутку і з'являється в міру наближення до кінця сторінки. Опція досить цікава і не така вже й складна в реалізації.

Можна, в принципі, створити кнопку нагору за допомогою певних скриптів і редагування WordPress шаблону, проте є варіант простіше — плагіни. Він ідеально підійде для тих, кому ліньки розбиратися кодом, або тим, хто погано орієнтується в питаннях веб-розробки. Крім того, у модулів є різні налаштування для реалізації тих чи інших цікавих фішок. А це також, погодьтеся, дуже корисно. З 10 плагінів, знайдених для функції Back to top, я розгляну лише 4, які мають достатню кількість завантажень і відповідають актуальним версіям системи WordPress.

Легкий та налаштований плагін Smooth Scroll Up дозволяє додати кнопку вгору для будь-якого посту/сторінки в WordPress. Завантажили модуль понад 40 тисяч разів, підтримуються WP версії від 3.2 до 4.1. Останнє оновлення було нещодавно. Є переклади різними мовами (російської, української поки що немає).

Основні можливості Smooth Scroll Up:

• Вибір різних елементів для кнопки вгору: текст, зображення, кнопки.
• Вибір позиції елемента Back to top: зліва, справа, по центру.
• Можливість вказувати будь-який текст для кнопки вгору.
• Встановлює відстань від верху сторінки, після якої з'являється кнопка.
• Анімація при скролінгу (прокручування, затемнення).
• Відображення/приховування на головній сторінці та мобільних пристроях.
• Додавання події під час кліку.

Тут і параметри для кнопки вгору (колір, кордон, фон, прозорість), і завдання розташування елемента Back To Top, і використання картинок або тексту для нього плюс опції анімації при прокручуванні тощо. Підтримувані версії WordPress — від 3.0 до 3.9.2, завантажено модуль понад 18 тисяч разів.

З цих чотирьох плагінів для кнопки нагору я б і радив вам вибирати. Черговість їх у огляді не є рейтингом, тобто не означає, що я розглядав найкращі на початку чи наприкінці статті, вони йдуть у міру ознайомлення. Все в принципі залежить від ваших потреб. Якщо ви взагалі далекі від розробки та WordPress, то найпростіше встановити Smooth Scroll Up і забути. Бажаючим покопатися з налаштуваннями, підійдуть два останні плагіни. Перший - найновіший на даний момент. Загалом, вибрати є з чого.

Все, що потрібно від вебмайстра - це щоб його сайт був зручним, щоб користування ним не викликало депресію у відвідувачів, і шаблон не заважав користувачам спокійно вивчати матеріали ресурсу. Якщо ви будете використовувати не змінену тему Вордпрес, швидше за все, вам не вдасться зробити зручний сайт, оскільки за замовчуванням кнопки для WordPress не встановлюються – їх потрібно додатково завантажувати та активувати. Адже щоб користувач міг зручно читати статті та гортати вміст, на сайті обов'язково має бути кнопка "Вгору".

Кнопка "Вгору" - це невеликий значок-стрілочка, при натисканні на який сторінка швидко прокручується вгору.

Таким чином, якщо користувач почав читати статтю або вирішив подивитися, що пишуть у коментарях, йому не доведеться потім мучитися з прокруткою сайту вгору. Замість використання стандартного прокручування браузера, він натисне на іконку кнопки “Вгору”, і плавно перенесеться до початку сторінки. Це дуже зручно і практично є обов'язковою умовою для будь-якого "довгого" (якщо сторінки ресурсу такої довжини, що їх доводиться прокручувати) сайту. У цій статті будуть розглянуті плагіни для додавання кнопки "Вгору".

jQuery Smooth Scroll – це зручний та швидкий модуль для активації кнопки “Вгору” на сайті. Щоб додати на ресурсі таку кнопку, достатньо завантажити та встановити плагін. Відразу після активації збоку сторінок з'являється невелика кнопка, що плаває. З нею читати довгі статті та гортати сторінку буде набагато простіше. Кнопка має стильний дизайн і не загубиться на тлі шаблону Вордпрес.

А якщо ви знаєте особливості CSS мови програмування, то зможете самостійно налаштувати кнопку "Вгору" на власний розсуд. Загалом, плагіну jQuery Smooth Scroll достатньо, щоб задовольнити потреби більшості вебмайстрів, але далі буде розглянуто ще кілька популярних інструментів на випадок, якщо цей модуль у вас не спрацює.

Далі слідує не менш популярний плагін Smooth Scroll Up - це гранично простий і зрозумілий інструмент, що за лічені хвилини дозволить створити іконку "Наверх" в бічній частині сайту. Хоча в модулі немає безлічі налаштувань, він дуже функціональний. Далі вказані основні особливості плагіна Smooth Scroll Up:

• можна вибирати між різними типами елемента “Вгору” (текст із посиланням, значок, зображення тощо);
• елемент прокручування вгору можна вибирати самостійно із власної колекції;
• можна додавати свій коментар біля кнопки прокручування вгору;
• розташування елемента на сайті регулюється (якщо вона потрібна, тільки щоб зручно читати сторінку, краще розміщувати в правій частині, але плагін дозволяє розташувати її в лівій стороні, і по центру);
• можна додавати винятки для відображення в різних частинах сайту (вимкнути відображення кнопки “Вгору” на головній або дезактивувати на будь-якій іншій сторінці);
• модуль працює і на мобільних версіях сайту (за потребою, для телефону кнопку "Вгору" можна забрати);
• є анімації для прокручування (slide і fade, або без анімаційного ефекту);
• можна вказати відстань, після якої кнопка "Вгору" з'явиться (так зручніше читати, адже елемент не буде безглуздо з'являтися відразу після заходу на сайт, а відобразитися тільки в потрібний момент);
• у кнопку “Вгору” можна закласти посилання для відкриття сторінки у новій вкладці;
• можна додати власні параметри CSS для елемента.

Цей плагін відмінно підійде для тих, хто не хоче самостійно думати над тим, якою буде кнопка. Якщо ви просто хочете, що користувачам було простіше читати та переглядати матеріали, і при цьому мати цікаву кнопку прокручування, то WPFront Scroll Top – саме те, що вам потрібно. Модуль містить велику колекцію готових іконок. А якщо не хочете розводити увагу користувача іконкою "Далі", то можете просто додати текст для прокручування без зображення.

Плагін WPFront Scroll Top легко встановлюється на двигун Вордпрес. Він містить безліч налаштувань, таких як:

• активація/дезактивація кнопки;
• розмір ікон;
• ступінь прозорості;
• швидкість прокручування;
• додавання автоматичного приховування кнопки через задану кількість секунд;
• пропис тега Alt для елемента;
• колір та фонове оформлення тексту кнопки (головне – щоб читати напис було зручно, він має бути виразним).

Зверніть увагу, що наведений інструмент не поширюється російською мовою. Але оскільки читати в налаштуваннях особливо нічого, то складнощів у користуванні не повинно бути.

Далі ще один плагін, який покращить "юзабіліті" вашого ресурсу - інструмент Scroll Back To Top. Він також містить безліч параметрів налаштування. Ви зможете у будь-який момент деактивувати елемент, зробити його непрозорим або створити прев'ю іконки. Розмір та колір елемента легко регулюються. Можна настроювати відстань від "топу" сайту, після проходження якого з'являється кнопка. Розташування елемента в лівій, правій частині та посередині сторінки.

Плагін Scroll Back To Top не містить великої кількості типів ікон. Усього їх близько 10. За потребою можна відключити іконку і залишити лише текст (“Далі”, “Вгору” тощо). Розмір іконок регулюється за спеціальною шкалою від одного до шести. Для активації індивідуального стилю параметрами елемента є пункт “Extra CSS” для додавання власного дизайну.

Це англійський модуль для розміщення кнопки "Вгору" практично в будь-якому положенні на сайті. З ним читати і гортати сторінку буде простіше, адже кнопка може бути розміщена в одному з чотирьох положень. Плагін налаштовується англійською мовою. Кнопка може бути активована/вимкнена для мобільної версії ресурсу. Швидкість прокручування регулюється.

Що цікаво, плагін Dynamic To Top Plugin працює з кешуванням, тому постійні користувачі зможуть читати ваші пости і прокручувати сторінки без зволікань роботи браузера. Модуль чудово відображається на комп'ютерах нового і старого покоління.

Далі слідує Skysa Scroll-to-Top App - плагін, який абсолютно не схожий на своїх конкурентів. Ви не просто додасте за допомогою нього кнопку "Вгору", але й зможете скористатися цим інструментом для створення цілого бару віджетів. Наприклад, можна додати плаваючий блок із голосуваннями, кнопками соціальних мереж та елементом прокручування сторінки. А щоб плагін не гальмував роботу сайту, він працює із кешем браузерів. Можливості даного модуля практично не обмежені - ви навіть зможете додати посилання в бар з кнопкою прокручування.

Завантажити один із зазначених доповнень – це нічого не варте для вас. Проте для сайту це принесе величезну користь. Кнопки “Далі”, “Нагору”, “Назад” тощо значно полегшать життя відвідувачам ресурсу. Повірте, вони будуть вдячні! А разом з ними – і пошукові машини, оскільки чим сайт зручніший, тим вищі його позиції у пошуку.

Кнопка вгору для сайту - більше 7 перевірених рішень - 4.6 out of 5 based on 73 votes

Кнопка "Вгору" відіграє велику роль у покращенні зручності користувача, особливо на тих сторінках, які сильно нагромаджені контентом. А так як в даний час контент для сайту найголовніше, то його на сторінках, як правило, стає все більше і більше і найкращим способом перенаправити відвідувача нагору сторінки є різні спеціальні кнопки, як зробити кнопку нагору для свого сайту ми розглянемо в цій статті .

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

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

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

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

^Наверх

Приклад 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;

Недоліки:

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

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

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

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

Кнопка реалізована досить легко. Для її функціонування знадобиться бібліотека jQuery, невеликий скрипт, що містить події jQuery, певні стилі та тег DIV, що містить сам текст і необхідний ID.

Кнопка працює у браузерах починаючи з версій Firefox 3.0.10 – 3.6.13, Internet Explorer 7 та 8, Google Chrome, Jquery 1.4.3. На жаль, кнопка не працює в IE 6, а воно вам треба:) ?

JQuery JavaScript код:

Поданий нижче код вам необхідно вставити перед тегом на всіх сторінках вашого сайту. Якщо бібліотека jQuery вже підключена до вашого сайту, то перший рядок додавати не потрібно.

$(function() ( $(window).scroll(function() ( if($(this).scrollTop() != 0)) ( $("#toTop").fadeIn(); ) else ( $(" #toTop").fadeOut(); ) )); $("#toTop").click(function() ( $("body,html").animate((scrollTop:0),800); )); ));

Щоб надати гарний зовнішній вигляд кнопці, необхідно додати наступні стилі. Їх найкраще додати у файл стилів вашого сайту.

#toTop (width:100px; border:1px solid #ccc; background:#f7f7f7; text-align:center; padding:5px; position:fixed; bottom:10px; /* відступ кнопки від нижнього краю сторінки*/ right:10px ; cursor:pointer;display:none;color:#333;font-family:verdana;font-size:11px;

Для виклику кнопки додайте наступний HTML код перед тегом.

^ Вгору

Простий плагін, що робить плавну появу кнопки і плавний скролінг вгору при натисканні на неї. Щоб задіяти плагін на своєму сайті, немає необхідності додавати будь-які теги в розмітку HTML сторінки. Достатньо підключити всі необхідні файли плагіна, і він буде працювати.

Вихідники

У представленому архіві знаходиться 3 папки: css - файл стилів кнопки, img - зображення та папка js в якій знаходяться 4 JavaScript файли.

Підключення JavaScript файлів:

Розпакуйте завантажений архів з вихідними джерелами в якусь папку вашого сайту. Для залучення плагіна нам достатньо підключити три з наявних js файлів. Для їх підключення перед закриваючим тегом додайте такі шляхи до файлів:

$(document).ready(function() ( /* var defaults = ( containerID: "toTop", // fading element id containerHoverID: "toTopHover", // fading element hover id scrollSpeed: 1200, easingType: "linear" ) ; */ $().UItoTop(( easingType: "easeOutQuart" )); ));

Шляхи, що ведуть до файлів, виправте відповідно до того, в якому каталозі розміщуються файли плагіна.

Зверніть увагу, якщо раніше ви вже підключили до свого сайту бібліотеку jQuery, додавати наступний код не потрібно:

Додавання CSS:

Наступний крок - це додавання CSS стилів, без них кнопка не запрацює. Підключити їх можна двома способами.

Перший спосіб це додати на всі сторінки вашого сайту між тегами посилання на CSS файл стилів:

Не забудьте лише змінити шлях до файлу.

Другий спосіб це скопіювати весь вміст файлу ui.totop.css і вставити його у файл CSS стилів вашого сайту. Другий спосіб буде більш раціональним, оскільки не вимагає підключення зайвих файлів.

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

Вихідники

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

Підключити HTML:

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

Підключення JavaScript:

Відразу після HTML коду, перед тегом розмістіть код виклику необхідних JavaScript файлів та JQuery код.

$(function() ( var $elem = $("#content"); $("#nav_up").fadeIn("slow"); $("#nav_down").fadeIn("slow"); $( window).bind("scrollstart", function()( $("#nav_up,#nav_down").stop().animate(("opacity":"0.2")); )); $(window).bind ("scrollstop", function()( $("#nav_up,#nav_down").stop().animate(("opacity":"1")); )); $("#nav_down").click( function (e) ( $("html, body").animate((scrollTop: $elem.height()), 800); )); $("#nav_up").click(function (e) ( $( "html, body").animate((scrollTop: "0px"), 800); )); ));

Шляхи, що ведуть до JS файлів, необхідно замінити на свої.

У першому рядку коду підключається бібліотека JQuery, тому якщо раніше ви вже підключали її до свого сайту, то її необхідно прибрати.

Далі слід підключення ще одного JS файлу і код, який містить певні функції, які необхідно розглянути докладніше. Тому що за допомогою їх можна змінювати деякі параметри роботи кнопок. Нижче наведено код із роз'ясненнями:

// content - це ідентифікатор того дива всередині якого має лежати весь вміст, який має прокручуватися, якщо весь вміст сторінок вашого сайту лежить в іншому id, то можете його сюди вписати, тому що без цього кнопки не працюватимуть $(function( ) ( var $elem = $("#content"); // за допомогою наступних двох рядків проводиться показ кнопок $("#nav_up").fadeIn("slow"); $("#nav_down").fadeIn(" slow"); // при прокручуванні у кнопок з'являється ефект загасання, реалізовано це зміною їх прозорості, тому змінюючи показник 0,2 в діапазоні від 0,1 до 1 можна регулювати їх прозорість $(window).bind("scrollstart", function ()( $("#nav_up,#nav_down").stop().animate(("opacity":"0.2")); ));// тут можна регулювати ту ж прозорість, але вже в той момент коли кнопки просто відображаються на сторінці, за замовчуванням значення - 1 $(window).bind("scrollstop", function()( $("#nav_up,#nav_down").stop().animate(("opacity":"1) )); ));// змінюючи число 800 можна збільшувати або зменшувати швидкість прокручування сторінки вгору $("#nav_down").click(function (e) ( $("html, body").animate((scrollTop: $elem .height()), 800); )); // те ж, що й вище, але для прокручування вниз $("#nav_up").click(function (e) ( $("html, body").animate((scrollTop: "0px"), 800); ) ); ));

Підключення CSS:

Для того, щоб додати CSS, просто підключіть до сторінок сайту файл style.css, що знаходиться в архіві з вихідними файлами:

А найкращим варіантом буде скопіювати стилі цього файлу та вставити їх у файл стилів свого сайту.

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

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

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

Зображення:

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

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

Вгору

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:

$(document).ready(function()( $(window).scroll(function()) if ($(this).scrollTop() > 100) ( $(".scrollup").fadeIn(); ) else ( $(".scrollup").fadeOut(); ) )); $(".scrollup").click(function()( $("html, body").animate(( scrollTop: 0 ), 600)) ;return false;));));

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

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

Джерело: http://gazpo.com/2012/02/scrolltop/

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

Для створення кнопки використовується зображення стрілки, CSS стилі та JQuery.

Зображення:

HTML код:

Для виклику кнопки використовується такий HTML код:

Back to Top

Але поміщати його потрібно безпосередньо перед основним вмістом сторінки, якщо помістити його перед тегом, що закриває, то кнопка не буде працювати.

І ще один важливий момент щодо HTML коду. Тегу ви повинні присвоїти ідентифікатор top.

Якщо тегу вже надано певний id, тоді в коді виклику кнопки, розміщеному трохи вище, #top потрібно замінити на #ваш-id

За допомогою CSS задані відступи та зовнішній вигляд кнопки, додано властивість transition: для створення ефекту затримки при наведенні курсору. Вставляти його краще в CSS файл вашого сайту.

#back-top ( position: fixed; bottom: 30px; margin-left: -150px; ) #back-top a ( width: 108px; displej: блок; , sans-serif; text-transform: uppercase; text-decoration: none; color: #bbb; /* transition */ -webkit-transition: 1s; a:hover ( color: #000; ) /* arrow icon (span tag) */ #back-top span ( width: 108px; height: 108px; display: block; margin-bottom: 7px; background: #ddd url( up-arrow.png) no-repeat center center, /* rounded corners */ -webkit-border-radius: 15px; transition: 1s; -moz-transition: 1s; transition: 1s;

$(document).ready(function()( // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () ( $(window) ).scroll(function () ( if ($(this).scrollTop() > 100) ( $("#back-top").fadeIn(); ) else ( $("#back-top").fadeOut (); ) ));// scroll body to 0px on click $("#back-top a"). );return false;));));));

Перший рядок це підключення бібліотеки JQuery, якщо у вас вона вже підключена, то цей рядок не додавайте. Решту коду додайте між тегами.

За потреби можна змінити такі параметри:

• 100 - кількість пікселів, після прокручування якого з'являється кнопка;
• 0 - це означає, що прокручування буде проводиться до нульового пікселя тобто до самого верху.
• 800 - це швидкість прокручування в мілісекундах.

Велика напівпрозора кнопка вгору, що з'являється при скролінгу по центру сторінки. Не помітити її важко. Зроблено лише за допомогою JQuery та CSS.

Розбираємось з HTML:

Для роботи кнопки основний вміст сторінки, який має прокручуватись, необхідно помістити між двома тегами:

Тут нічого особливого немає, просто вставте цей код у файл CSS стилів вашого сайту.

#message a ( /* display: block before hiding */ display: block; display: none; /* link is above all other elements */ z-index: 999; : .8; margin */ /* link is centered */ left: 50%; margin-left: -160px;/* = half of width -webkit-border-radius: 24px; #000;font-size: 24px;text-align:center;color:#fff;

$(function () ( /* set variables locally for increased performance */ var scroll_timer; var displayed = false; var $message = $("#message a"); var $window = $(window); var top = $ (document.body).children(0).position().top; () ( if($window.scrollTop()