Плагин "Scroll Up" (Кнопка "наверх")

Дополнительные модули и доработки для LiveStreet
Наверх
Доброго времени суток!
Помню давно возникал вопрос, что листать вручную вверх страницы очень не удобно, решили что вполне можно пользоваться сочетанием клавиш Crtl+Home, но ведь большинство пользователей об этом не знают, поэтому решил сделать мини-плагин, который добавляет справа кнопку "↑ Наверх" при нажатии на которую осуществляется переход в начало страницы.
Скачать можно из каталога Плагин «Scroll Up». Работает на версии 0.4.2+
Опробовать можно на сайте test.vaktive.ru

пс: Счастливого нового года! =)

UPD: Добавил поддержку 0.4.2, плагин теперь на модерации.

50 комментариев

avatar
И почему этого до сих пор никто не сделал. Спасибо.
avatar
У себя ранее реализовывал через jquery с плавной прокруткой, но, в любом случае, конечно же + за маленькие и приятные плагины, многим пригодится)
avatar
Выложите, пожалуйста, где-нибудь, а то в каталоге не скоро появится, заранее спасибо!
  • Wise
  • 0
  • ↓
avatar
Выложил, ссылка в топике.
avatar
Спасибо!!! +100500
avatar
спасибо, удобная штука!
avatar
Есть еще такой вариант скрола —
Цепляем js:
(function(jq) {
			jq.autoScroll = function(ops) {
			ops = ops || {};
			ops.styleClass = ops.styleClass || 'scroll-to-top-button';
			var t = jq('<div class="'+ops.styleClass+'"></div>'),
            d = jq(ops.target || document);
			jq(ops.container || 'body').append(t);

			t.css({
				opacity: 0,
				position: 'absolute',
				top: 0,
				right: 0
			}).click(function() {
				jq('html,body').animate({
					scrollTop: 0
				}, ops.scrollDuration || 1000);
			});

			d.scroll(function() {
				var sv = d.scrollTop();
				if (sv < 10) {
					t.clearQueue().fadeOut(ops.hideDuration || 200);
					return;
				}

				t.css('display', '').clearQueue().animate({
					top: sv,
					opacity: 0.8
				}, ops.showDuration || 500);
			});
		    };
	        })(jQuery);

	        $(document).ready(function(){
		        $.autoScroll({
			        scrollDuration: 900, 
			        showDuration: 600, 
			        hideDuration: 300
		        });
	        });

И добавляем в css:
.scroll-to-top-button{
	background: url(../images/scroll_to_top.png) 0 0 no-repeat;
	width: 24px;
	height: 24px;
	cursor: pointer;
	margin-top: 30%;
}

не забываем залить картинку кнопки.

Exemple

Тоже можно упаковать в плагин
avatar
Спасибо, я думал сделать такой вариант, но меня бесит когда что то дергается или плавает на сайте, это отвлекает от контента.
avatar
я так реализовал бац, не дергается и не плавает, и появляется ненавязчиво
скриптик небольшой, на jquery, если интересно — как у домашнего компа буду распишу
avatar
Видел и такой вариант, это на любителя… по мне лучше когда ссылка всегда есть, я всегда знаю где она находится и в любой момент могу нажать. И кстати говоря внизу экрана она логичнее.
avatar
дык это уж везде так, на вкус и цвет все фломастеры разные ) а по поводу того что ссылка внизу логичнее — тут могу поспорить, хотя опять-же дело вкуса. по моему наблюдению на кнопку как таковую внимания вообще никто поначалу не обращает, а когда начинают судорожно крутить окно вверх — взгляд как-раз чаще в верхнюю область направлен, где ее и замечают… ну а потом дело привычки…

я всегда знаю где она находится и в любой момент могу нажать
и снова дело вкуса — но толку то ее в любой момент нажимать, если окно итак уже некуда вверх крутить :) в каком-то смысле кнопка себя обнаруживает и дает понять для чего она когда появляется только при возможности крутить вверх
avatar
распишите плз)
avatar
Я не вдавался в подробности и не смотрел в тело странице, но вообще есть jquery waypoint с которым можно много чего напридумывать. вот реализация кнопки наверх
imakewebthings.github.com/jquery-waypoints/sticky-elements/
avatar
а где можно про это почитать?)

сделал свою кнопку, но не получается сделать появление кнопки после прокрутки страницы(, как в вашем примере
avatar
Добавляем в хэд сам скрипт waypoint jquery, стили указанные в коде и html из страницы, ну а код должен быть следующим:

$(document).ready(function() {
	$('.top').addClass('hidden');
	$.waypoints.settings.scrollThrottle = 30;
	$('#wrapper').waypoint(function(event, direction) {
		$('.top').toggleClass('hidden', direction === "up");
	}, {
		offset: '-100%'
	});
});

Читать не знаю где, вроде по исходникам страницы все понятно.
А маны вот, тут их много)
avatar
Спасибо
avatar
Заюзал waypoint, теперь у меня кнопочка плавно появляется при пролистывании половины экрана!

Спасибо за помощь! Доволен как слон)
avatar
если кого-то интересует реализация через вэйпоинты могу оформить плагином
avatar
Оформите действительно, мне как раз таки хотелось ответить на этот плагин waypoint'ом, т.к он слишком неюзабильный. А будет действительно хорош, полезен и глаза просто так мазолить не будет.
avatar
ок, сделаю в ближайшее время
avatar
Вобщем почти готово, только столкнулся с одной проблемой:

Хочу вынести в конфиг настройку того, через какое кол-во прокрутки страницы вниз появляться кнопочке, но не могу правильно передать параметр в jquery скрипт для изменения значения offset:

Пробовал делать так:
<script>

var off = {$oConfig->GetValue("plugin.wiseup.Up_UseText")};

{literal}
jQuery (document).ready(function($){
	$.waypoints.settings.scrollThrottle = 30;
	$('#header').waypoint(function(event, direction) {
		$('.up').toggleClass('hidden', direction === "up");
		}, {
			offset: off
	});

	$("#up").click(function(){
		var curPos=$(document).scrollTop();
		var scrollTime=curPos/2;
		$("body,html").animate({"scrollTop":0},scrollTime);
	});
});
{/literal}
</script>


В конфиге передаю параметру Up_UseText значение '-50%'
В результате скрипт вообще не срабатывает.

Если в строке var убрать в конце точку с запятой, тоработает прокрутка, но кнопка не появляется, т.е. off не подставляется нужное значение

Если написать просто '-50%' без использования переменной из конфига, то все айс.

Может кто подскажет как можно реализовать?
avatar
сорри, что долго отвечал, предновогодняя суета, куча работы и смена официалки :)
вкратце — jQuery в шаблонах уже включен, дополнительных фич и библиотек не надо… в подключаемый js файл шаблона в самый конец (для удобства) копируем код


	$(document).ready(function(){
		$("#back-top").hide();
		$(function () {
			$(window).scroll(function () {
				if ($(this).scrollTop() > 50) {
					$('#back-top').fadeIn();
				} else {
					$('#back-top').fadeOut();
				}
			});
			$('#back-top').click(function () {
				$('body,html').animate({
					scrollTop: 0
				}, 800);
				return false;
			});
		});
	});

в данном скриптике 50 это количество прокрученных пикселей, после которого появляется кнопка, в моем случае это высота шапки

сохраняем, в файлах шаблона в футере перед самым закрытием body вставляем ссылку


<a href="#" id="back-top"></a>


ну а в css придаем нужный вид, какой угодно, главное не забыть прописать position:fixed; и координаты постоянной позиции кнопки

ps. если это ваш первый эксперимент в шаблоне не забывайте делать бэкап
pps. после всех махинаций не забудь почистить кэш
как-то так :)
avatar
подскажите пожалуйста в какой именно файл шаблона js нужно вставить коды?
Заранее спасибо!
avatar
в main.js, к примеру
avatar
ну а в css придаем нужный вид, какой угодно, главное не забыть прописать position:fixed; и координаты постоянной позиции кнопки
Подскажите пример вида css и куда его прописывать. Спасибо.
avatar
Спасибо.
avatar
А на 0,4,2 будет)?
avatar
Если хотя бы 10 человек на 0.4.2 наберутся сделаю.
avatar
Хорошо было бы на 0.4.2. тоже, а то я не знаю когда еще переходить буду
avatar
у меня имеется для 0.4.2 версии
avatar
Посмотрел в 0.4 версии хуки были которые используются в плагине, так что можно просто в файле plugin.xml поменять

	<requires>
		<livestreet>0.5</livestreet>

на

	<requires>
		<livestreet>0.4.2</livestreet>

и все будет работать на версии 0.4.2
avatar
Спасибо, попробуем
avatar
Fatal error: Smarty error: [in Z:\home\sait\www/plugins/up/templates/skin/default//styles.tpl line 2]: syntax error: unrecognized tag: color: green; background: #FAFBFB; bottom: 30px; right: 0; position: fixed; z-index: 100; text-align: right; float: right; border-radius: 10px 0 0 10px; border-top: 1px solid #eee; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; padding: 8px; (Smarty_Compiler.class.php, line 446) in Z:\home\sait\www\engine\lib\external\Smarty-2.6.19\libs\Smarty.class.php on line 1092

вот такая ошибка вышла на локалхосте, кэш чистил, версия 0.4.2
avatar
Исправил, выложил в каталог, после модерации будет доступно.
avatar
Может быть, есть смысл добавить еще и кнопку «ВНИЗ», как опцию.
avatar
Зачем? Оо
avatar
Добавить кнопки «в Рай» и «в Ад» =)))
avatar
«Вниз» не нужно.
avatar
Ну не нужно, так не нужно! Я ж только предположил.
(мой первый "-") :)
avatar
Можно ли саму кнопку поднять немного, чтобы она была прямо на границе с началом горизонтальной черты футера, а то она счётчики закрывает, как то глаз коробит ))?
avatar
Можно в файле styles.tpl, поиграйся с параметром bottom: и подбери какая высота тебе нужна =)
avatar
в топике НеАнгела я приводил пример что именно для ВП таких вот плагинов большинство и для ЛС их ещё не начали плодить. И вот если скоро все будут писать плагины в одну строку еффективного кода, то лучшие плагины в каталоге могут точно затерятся.
avatar
Что ты предлагаешь? Не писать такие плагины?
avatar
держать соотношение между такими плагинами. польза от плагина одна. а вот то, что подключается, инициализируется ещё один скрипт на сервере ради строчки ЖС кода. Тут идейно просто нехорошо.
avatar
Какие решения то? Всем стать программистами и писать полностью проекты самим?
пс: я соотношение держу =)
avatar
нет. ну просто выполнить в виде хака, например.
У вас да. Но может кто-то начнет делать полуплагины.
avatar
Сделал адаптацию плагина под шаблон Social.
doyouknowthis.ru/upsocial.rar

avatar
Как можно изменить скорость прокрутки? На длинных топиках работает как колесо обозрения, хочется быстрее вверх попасть.
avatar
В файле plugins\up\templates\skin\default\js\up.js в функции
$.scrollTo( $('body') , 500,  { axis: 'y' } );

поставьте длительность анимации (второй параметр) поменьше.
avatar
Прошу извинить, сразу не уточнил — у меня 0.51 и версия Вашего плагина 0.1.2. Там в папке default только 2 файла button.tpl и styles.tpl
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.