- 1. Кнопка «Вгору-Назад» (на попередню сторінку)
- HTML
- CSS
- 2. Кнопка «Вгору-Вниз» (назад в ту частину сторінки, де був перехід наверх)
- HTML і CSS
- jQuery + плагін scrollTo
- Миша Рудрастих
Наша взаимовыгодная связь https://banwar.org/
Це стаття - продовження до мого старого посаді про кнопку наверх , Який з моменту публікації набрав максимальну кількість переглядів серед інших постів на блозі і 95 коментарів!
Ось скрін з Google Analytics, топ 3 поста на блозі з моменту публікації «кнопки наверх»:
Відрив практично в два рази, вражає 🙂
В коментах мене просили, і не раз, зробити точну копію кнопки як вконтакте, тобто щоб при прокручуванні наверх вона перетворювалася в кнопку «Назад» (це було в той час), а зараз там кнопка трохи змінилася і тепер її можна назвати кнопкою « вгору-вниз »(повертає назад в ту частину сторінки, звідки ви натиснули« наверх ». Сьогодні я розпишу обидва варіанти.
1. Кнопка «Вгору-Назад» (на попередню сторінку)
Теорія цієї кнопки в тому, що коли людина натиснула на кнопку «наверх», йому захочеться повернутися на попередню переглянуту сторінку (хіба що попередня сторінка - результати пошуку в Google) і тому йому необхідно запропонувати таку можливість.
HTML
Спочатку HTML-код, вставте його куди-небудь на свій розсуд, я б засунув перед закриває тегом </ body>:
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </ script> <script src = "button_back.js"> </ script> <div id = "top-link"> <a href = "#top"> наверх </ a> </ div>Повторю ще раз, якщо кнопка не працює, спробуйте при підключенні файлу button_back.js прописати абсолютний URL.
CSS
# Top-link {cursor: pointer; display: none; position: fixed; top: 0px; bottom: 0px; padding-left: 5px; padding-top: 5px; z-index: 1; } # Top-link a {display: block; }jQuery
Це вміст файлу button_back.js. Зверніть увагу на ID основного блоку з контентом на 3-му рядку коду, у мене це #content, а у вас може бути що-небудь інше, наприклад #wrapper або #container.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 jQuery. extend (jQuery. fn, {toplinkwidth: function () {totalContentWidth = jQuery ( '#content') .outerWidth (); // ширина блоку з контентом, включаючи padding totalTopLinkWidth = jQuery ( '# top-link') .children ( 'a') .outerWidth (true); // ширина самої кнопки наверх, включаючи padding і margin h = jQuery (window). width () / 2 - totalContentWidth / 2 -totalTopLinkWidth; if (h <0) {// якщо кнопка не вміщується, приховуємо її jQuery (this) .hide ();} else {if (jQuery (window). scrollTop ()> = 1) {jQuery (this) .show ();} jQuery (this) .css ( { 'padding-right': h + 'px'});}}}); jQuery (function ($) {var topLink = $ ( '# top-link'); topLink. css ({ 'padding-bottom': $ (window). height ()}); // якщо вам не потрібно, щоб кнопка підбудовувалася під ширину екрану - видаліть наступні чотири рядки в коді topLink. toplinkwidth (); $ (window). resize (function () {topLink. toplinkwidth ();}); $ (window). scroll (function () {if ($ (window). scrollTop ()> = 1) {topLink. fadeIn (300) .children ( 'a') .html ( 'наверх') .parent () .removeAttr ( "onClick");} else {topLink . children ( 'a') .html ( 'назад') .parent () .attr ( "onClick", "history.back ()");}}); topLink. click (function (e) {$ ( " body, html ") .animate ({scrollTop: 0}, 500); return false;});});PS в прикладі я особливо не морочився з оформленням кнопки - все тільки найнеобхідніше, якщо вам потрібно оформлення - дивіться або завантажуйте демо.
2. Кнопка «Вгору-Вниз» (назад в ту частину сторінки, де був перехід наверх)
Як я вже говорив, вконтакте відмовилися від теорії, по якій відвідувачеві постійно хочеться перейти на попередню переглянуту сторінку.
Вони вирішили, що непостійного користувачеві після прокрутки сторінки наверх знову захочеться продовжити читання стрічки новин з того місця, де він зупинився. Скажу чесно, я сам стикався з такою ситуацією, так що цей варіант мені подобається більше.
Детальніше про те, як визначити поточне місцезнаходження на сторінці .
Отже, погнали.
HTML і CSS
Тут практично все точно також, як і в попередньому прикладі (але в демо є деякі відмінності в CSS), єдине тільки я назвав по-іншому файл зі скриптами, button_down.js:
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </ script> <script src = "button_down.js"> </ script> <div id = "top-link"> <a href = "#top"> наверх </ a> </ div> # top-link {cursor: pointer; display: none; position: fixed; top: 0px; bottom: 0px; padding-left: 5px; padding-top: 5px; z-index: 1; } # Top-link a {display: block; }jQuery + плагін scrollTo
Вміст файлу button_down.js, знову-таки не забуває змінити ID елемента #content.
; (Function ($) {var h = $. ScrollTo = function (a, b, c) {$ (window). ScrollTo (a, b, c)}; h. Defaults = {axis: 'xy', duration: parseFloat ($. fn .jquery)> = 1.3? 0: 1, limit: true}; h. window = function (a) {return $ (window) ._ scrollable ()}; $. fn ._scrollable = function () {return this .map (function () {var a = this, isWin =! a. nodeName || $. inArray (a. nodeName .toLowerCase (), [ 'iframe', '#document', 'html', ' body '])! = - 1; if (! isWin) return a; var b = (a. contentWindow || a) .document || a. ownerDocument || a; return / webkit / i. test (navigator. userAgent ) || b. compatMode == 'BackCompat'? b. body: b. documentElement})}; $. fn .scrollTo = function (e, f, g) {if (typeof f == 'object') {g = f; f = 0} if (typeof g == 'function') g = {onAfter: g}; if (e == 'max') e = 9e9; g = $. extend ({}, h. defaults , g); f = f || g. duration; g. queue = g. queue && g. axis .length> 1; if (g. queue) f / = 2; g. offset = both (g. offset ); g. over = both (g. over); return this ._scrollable (). each (function () {if (e == null) return; var d = this, $ elem = $ (d), targ = e, toff, attr = {}, win = $ elem. is ( 'html, body '); switch (typeof targ) {case' number ': case' string ': if (/^([+-]=)?\d+(\.\d+)?(px|%)?$/ .test (targ)) {targ = both (targ); break} targ = $ (targ, this); if (! targ. length) return; case 'object': if (targ. is || targ. style) toff = (targ = $ (targ)). offset ()} $. each (g. axis .split ( ''), function (i, a) {var b = a == 'x'? 'Left': 'Top ', pos = b. toLowerCase (), key =' scroll '+ b, old = d [key], max = h. max (d, a); if (toff) {attr [key] = toff [pos] + (win? 0: old - $ elem. offset () [pos]); if (g. margin) {attr [key] - = parseInt (targ. css ( 'margin' + b)) || 0; attr [key] - = parseInt (targ. css ( 'border' + b + 'Width')) || 0} attr [key] + = g. offset [pos] || 0; if (g. over [pos]) attr [key] + = targ [a == 'x'? 'width': 'height'] () * g. over [pos]} else {var c = targ [pos]; attr [key] = c. slice && c. slice (- 1) == '%'? parseFloat (c) / 100 * max: c} if (g. limit && / ^ \ d + $ /. test (attr [key])) attr [key] = attr [key] <= 0? 0: Math. min (attr [key], max); if (! i && g. queue) {if (old! = attr [key]) animate (g. onAfterFirst); delete attr [key]}}); animate (g. onAfter); function animate (a) {$ elem. animate (attr, f, g. easing, a && function () {a. call (this, e, g)})}}) .end ()}; h. max = function (a, b) {var c = b == 'x'? 'Width': 'Height', scroll = 'scroll' + c; if (! $ (a). is ( 'html, body')) return a [scroll] - $ (a) [c. toLowerCase ()] (); var d = 'client' + c, html = a. ownerDocument .documentElement, body = a. ownerDocument .body; return Math. max (html [scroll], body [scroll]) - Math. min (html [d], body [d])}; function both (a) {return typeof a == 'object'? a: {top: a, left: a}}}) (jQuery); jQuery. extend (jQuery. fn, {toplinkwidth: function () {totalContentWidth = jQuery ( '#content') .outerWidth (); // ширина блоку з контентом, включаючи padding totalTopLinkWidth = jQuery ( '# top-link') .children ( 'a') .outerWidth (true); // ширина самої кнопки наверх, включаючи padding і margin h = jQuery (window). width () / 2 - totalContentWidth / 2 -totalTopLinkWidth; if (h <0) {// якщо кнопка не вміщується, приховуємо її jQuery (this) .hide ();} else {if (jQuery (window). scrollTop ()> = 1) {jQuery (this) .show ();} jQuery (this) .css ( { 'padding-right': h + 'px'});}}}); jQuery (function ($) {var topLink = $ ( '# top-link'); topLink. css ({ 'padding-bottom': $ (window). height ()}); // якщо вам не потрібно, щоб кнопка підбудовувалася під ширину екрану - видаліть наступні чотири рядки в коді topLink. toplinkwidth (); $ (window). resize (function () {topLink. toplinkwidth ();}); $ (window). scroll (function () {if ($ (window). scrollTop ()> = 1) {topLink. fadeIn (300) .children ( 'a') .html ( 'наверх') .parent () .removeClass ( 'bottom_button') .addClass ( 'top_button ');} else {topLink. children (' a ') .html (' вниз ') .parent () .removeClass (' top_button ') .addClass (' bottom_button ');}}); topLink. click (function ( e) {if ($ (this) .hasClass ( 'bottom_button')) {// при натисканні на кнопку «вниз» переходимо туди, де припинили читання $ ( "body") .scrollTo (pos + 'px', 500);} else {// визначаємо і запам'ятовуємо координати того місця сторінки, звідки був здійснений перехід наверх pos = (window. pageYOffset! == undefined)? window. pageYOffset: (document. documentElement || document. body .parentNode || document. body) .scrollTop; $ ( "Body, html") .animate ({scrollTop: 0}, 500); } Return false; }); });Працездатність коду протестована в браузерах Google Chrome, Mozilla Firefox і Opera (в актуальних на момент поновлення даної статті версіях).
Миша Рудрастих
Вперше познайомився з WordPress в 2009 році. З 2014 року мене можна зустріти на WordCamp - офіційної конфе по WordPress, іноді там виступаю. Також в даний час веду курси по WordPress в Epic Skills .
Якщо вам потрібна допомога з вашим сайтом або може навіть розробка з нуля - пишіть мені .
CompatMode == 'BackCompat'?Is ( 'html, body '); switch (typeof targ) {case' number ': case' string ': if (/^([+-]=)?
D+(\.\d+)?
Px|%)?
Each (g. axis .split ( ''), function (i, a) {var b = a == 'x'?
Win?
Offset [pos] || 0; if (g. over [pos]) attr [key] + = targ [a == 'x'?
Slice (- 1) == '%'?
ParseFloat (c) / 100 * max: c} if (g. limit && / ^ \ d + $ /. test (attr [key])) attr [key] = attr [key] <= 0?
Max = function (a, b) {var c = b == 'x'?
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
