Наверняка многие привыкли к кнопке вверх вКонтакте. Часто на сайтах по привычке можно нажать на левую часть экрана в ожидании поднятия странички вверх, но не тут то было… Часто на длинных страницах хочется использовать кнопку вверх не обязательно как вКонтакте, а просто для поднятия вверх по страничке, потому что уж очень длинный скроллинг получился. Как этого добиться на своем сайте на WordPress?
Все очень просто, используется функция (часто называемая скрипт или scroll to top без плагина). Мне понравилась эта функция тем, что она очень хорошо работает, без лагов. К тому же ее можно настроить под себя и сделать это свершенное просто! Собственно вот сама функция.
Вы можете ее скопировать или скачать txt файл в котором я ее сохранил. Эту функцию добавляем в файл functions.php (желательно в самый низ, до тега ?>). Впрочем в самой функции все уже описано, лишь уточню некоторые детали:
- если вы хотите сделать картинку вместо фразы «Вверх», то уберите get_bloginfo( ‘template_url’ ). и укажите путь к картинке вместо /images/up.png
- постарайтесь подобрать оптимальное значение исходя из особенностей вашей темы и разрешением экрана большинства пользователей (поиграйтесь с цифрами $width = ’10’; и $margin = 5;
Функцию написал SlowProg.
Слепой Садовник в Репейнике.
Источник: seopmr.ru
Наверх как в вконтакте
Компьютерная помощь
Инструкции, Windows, Windows Server, Unix, VPN
Разное
Скрипт кнопки наверх как в Вконтакте
jQuery(document).ready(function() < // Виджет кнопки вверх (Test-Templates) // Версия 1.0 jQuery(‘body’).append(‘▲ Вверх’); 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(); >, function()< jQuery(this).animate(< ‘opacity’:’0.7′ >).css();; >); >);
Поделиться этой записью
Источник: chelp.info
шпаргалки блогерши
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.
Кнопка вверх как в ВКонтакте для Blogger.
Здравствуйте, друзья, читатели и гости блога. Обращали ли вы внимание на вид такой кнопки в социальной сети ВКонтакте. У многих наверняка там есть свой аккаунт.
Кнопка Наверх как во Вконтакте на WordPress
Предложу вам сегодня 2 варианта кнопки вверх как в ВК.
Кнопочка и правда интересная. Она появляется сразу после начала прокрутки страницы. Пользователь в любом месте может перейти к началу страницы, нажав на неё. Посмотрите в тестовом блоге. Слева стрелочка вверх и справа такой же вариант, но с применением дополнительных стилей CSS.
Код первой. Поменяв значение left, её можно сделать с правой стороны. И прозрачность opacity: 0.7; на своё усмотрение.
jQuery(‘body’).append(‘▲ Вверх’);
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;
>);
Код второй кнопки.
вверх
$(function()
$(window).scroll(function()
if($(this).scrollTop()>100) $(‘a#button ‘).fadeIn();
else $(‘a#button ‘).fadeOut(400);
>);
$(‘a#move_up’).click(function() $(‘body,html’).animate(, 800);
return false;
>);
>);
a#button
position:fixed;
top:8px;
right :20px;
width:60px;
height:25px;
display:none;
text-align:center;
font:14px Arial,Verdana,sans-serif;
color:#fff;
background:#98A7CC ; / фон кнопки /
padding-top:6px;
opacity:0.8 ;
filter:alpha(opacity=80);
border-radius: 2px;
text-decoration:none;
>
a#button :hover
opacity:0.9 ;
filter: alpha(opacity=90);
>
Также можно установить в левой части и поменять цветовое решение background:#98A7CC.
В Блоггере любой из этих кодов устанавливается в гаджет HTML/JavaScript.
Сегодня у меня всё. Всем удачи. Спасибо, что читаете мои шпаргалки. Увидимся.
Источник: www.shpargalochki.ru