На многих сайтах не предусмотрена кнопка «вверх», которая быстро доставляет к верху сайта. На всем известном сайте «Вконтакте» реализована очень приятная боковая полоска, при наведении на которую высвечивается надпись «Вверх», а при нажатии вас поднимает к верху сайта. Реализуем и мы! В footer.php вставляем:
|
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 |
<p><script type="text/javascript"> jQuery(document).ready(function() { // Виджет кнопки вверх (Test-Templates) // Версия 1.0 jQuery('body').append('<div class="button-up" style="display: none;opacity: 0.7;width: 100px;height:100%;position: fixed;left: 0px;top: 68px;cursor: pointer;text-align: center;line-height: 30px;color: #d3dbe4;font-weight: tahoma, verdana, arial, serif;">^ Вверх</div>'); jQuery (window).scroll (function () { if (jQuery (this).scrollTop () > 100) { jQuery ('.button-up').fadeIn(); } else { jQuery ('.button-up').fadeOut(); } }); jQuery('.button-up').click(function(){ jQuery('body,html').animate({ scrollTop: 0 }, 800); return false; }); jQuery('.button-up').hover(function() { jQuery(this).animate({ 'opacity':'1', }).css({'background-color':'#e7ebf0','color':'#6a86a4'}); }, function(){ jQuery(this).animate({ 'opacity':'0.7' }).css({'background':'none','color':'#d3dbe4'});; }); }); </script></p> |
И регулируем под ваш сайт (отступы, ширина полоски и т.д.).
Автор публикации
В наличии любые плагины и темы последних версий от компании AIT THEMES
Поддержать проект монетой можно так: https://money.yandex.ru/to/410012768487959
Поддержать проект монетой можно так: https://money.yandex.ru/to/410012768487959
