Кнопка "прокрутити на місце читання", як в VK
- Олександр Мойсеюк
- Верстка
- Переглядів: 1327
-
Кропка вниз ВК -
Ключова суть така: є 2 інтерактивні елементи — кнопки вниз та вгору. Клік на кнопку вгору крім самого прокручування буде записувати значення скільки пікселів прокрутили в спеціальну змінну scr, наприклад:
var scrTop = jQuery( "#scrolltop" ); var scrDown= jQuery( "#scrolldown" ); var scr = 0; scrTop.click(function(){ scr = pBody.scrollTop(); pBody.animate( { scrollTop: 0 }, 300 ); });
А кнопка вниз, як ви вже здогадалися, прокрутить на значення записане в цій же змінній scr
scrDown.click(function(){ pBody.animate( { scrollTop: scr}, 300 ); });
Можна також приховувати елементи,які недоцільні в певні моменти, класом hide, який має властивість display: none;. Таким чином можна добитися ефекту присутності однієї кнопки і її зміни при натисканні:
scrDown.removeClass('hide'); scrTop.addClass('hide');
Приклад реалізованої кнопки можна побачити на всіх сторінках цього сайту.
Кінцевий код з оформленням кнопок, приховуванням зверху сторінки, платформонезалежністю, тощо буде виглядати так:
<div id="scrollbuttons" class="scrollbuttons hidden-xs hidden-sm"> <div id="scrolltop" class="scrolltop hide" > <i class="fa fa-angle-up"></i> </div> <div id="scrolldown" class="scrolldown hide" > <i class="fa fa-angle-down"></i> </div> </div> <style> .scrollbuttons{ position: fixed; left: 25px; bottom: 100px; } .scrolltop,.scrolldown{ background: #95D0FE; background: rgba(149, 208, 254, 0.7); width: 35px; height: 35px; border-radius: 4px; -webkit-border-radius: 4px; - moz-border-radius: 4px; margin-bottom: 15px; padding: 0; opacity: 0.5; text-align: center; cursor: pointer; } .scrolltop:hover, .scrolltop:focus,.scrolldown:hover, .scrolldown:focus{ opacity: 1; } .scrollbuttons i{ font-size: 30px; line-height: 35px; color: #fff; } </style> <script> jQuery(document).ready(function() { var scrTop = jQuery( "#scrolltop" ); var scrDown= jQuery( "#scrolldown" ); var scr = 0; if(jQuery.browser.safari){ var pBody = jQuery('body'); }else{ var pBody = jQuery('html,body'); } jQuery(window).scroll(function () { var scrVal = jQuery(window).scrollTop(); if (scrVal > 200) { scrTop.removeClass('hide'); scrDown.addClass('hide'); } else { scrTop.addClass('hide'); if (scr !=0) { scrDown.removeClass('hide'); } }; }); scrTop.click(function(){ scr = pBody.scrollTop(); pBody.animate( { scrollTop: 0 }, 300 ); scrDown.removeClass('hide'); scrTop.addClass('hide'); }); scrDown.click(function(){ pBody.animate( { scrollTop: scr}, 300 ); scrDown.addClass('hide'); }); });</script>
Я ще зробив модуль для Joomla, але поділюся по запиту, або коли буде готове місце куди його опублікувати.