Кнопка "Наверх" - кому лениво скролить

Tips & tricks
Бегаю я по сайту ливстрита, и своим сайтам на ливстрите и так надоело мне крутить колёсико мышки чтоб снизу к меню подняться...,
что я родил вот такое маленькое дополнение =)


Итак.
Реализация на MooTools ибо они уже и так есть (спасибо _et за ссылки)
все что нам нужно, это отредактировать:
templates/skin/new/header.tpl

после — 
<script type="text/javascript" src="{$DIR_STATIC_SKIN}/js/panel.js"></script>


добавляем — 

<script type="text/javascript" src="{$DIR_STATIC_SKIN}/js/scrollm.js"></script>


после — 
<body onload="prettyPrint()">


добавляем — 

<a name="top" id="top"></a>
<a href="#top" id="gototop"><img src="{$DIR_STATIC_SKIN}/images/top.gif" /></a>


в файл templates/skin/new/css/style.css в самый конец добавить — 

#gototop { display:none; width:93px; position:fixed; right:35px; bottom:12px; }


и раскладываем скрипт и картинку по местам.

Реализация на JQuery Вдруг кому интересно…
все что нам нужно, это отредактировать:
templates/skin/new/header.tpl

после — 
<script type="text/javascript" src="{$DIR_STATIC_SKIN}/js/panel.js"></script>


добавляем — 

<script type="text/javascript" src="{$DIR_STATIC_SKIN}/js/jquery.min.js"></script>
<script type="text/javascript" src="{$DIR_STATIC_SKIN}/js/scrolltopcontrol.js"></script>


после — 
<body onload="prettyPrint()">


добавляем — 
<a name="top" id="top"></a>


и раскладываем скрипты и картинку по папкам (структура папок в архиве сохранена).

В результате имеем кнопочку как на скрине. когда мы на самом верху кнопочка пропадает.

52 комментария

avatar
На jquery? Грузить еще одну библиотеку?
Зы. эти библиотеки НЕ дружат.
  • _et
  • 0
  • ↓
avatar
ну у меня дружат у вас не дружат… реализуйте на мутулсе который уже приделан к ЛС. я на чем знал на том и сделал.
avatar
хатя и правда я опозорился похоже… жыкуре забило мутулс… эх пошел думать как на мутулсах сделать тоже самое. простите.
avatar
Вот скрол — ссыль, Демо
avatar
есть специальный «неконфликтный» режим на такой случай
avatar
Всё ещё проще, зря вы меня напугали напугали

В самое начало файла scrolltopcontrol.js довьте строчку jQuery.noConflict();

Архив перезалил.
avatar
так а какой смысл делать фикс? Зачем подключать огромную библиотеку ради скрола который и в mootools можно сделать? лишний загруз страницы не нужными скриптами.
avatar
да какие проблемы, сейчас предложу второй вариант на мутулзе же ну =)
я не принуждаю вас вроде не использовать данный хак, не подрубать жыкури, да и вобще не принуждаю ни к чему.
Я показал что такую кнопку можно сделать и что она бывает удобна для ЛС
avatar
Дописал реализацию средствами мутулс, _et спасибо за ссылки
avatar
Мне тоже прокручивать надоедает как-то) На днях думал сделать нечто подобное, только саму ссылку хотел в уже существующий ползунок для комментов вкрутить.
avatar
а на хабре кто-то заметил скрол? :) Если на колосике обновления комментов нажать мышь и подержать — передвигает вверх странички )
avatar
хотите также в ЛС? =) мне кнопка просто показалась понятнее для юзера.
Можно правда красиво сделать у нашей зелёной крутилки сделать язык (как когда посты есть язык вниз) вверх и на нем стрелочку вверх =)
завтра попрбую замутить.
Лора для вас попробую он маус клик на крутилке с задержкой =)
avatar
если на мутулз — я за ;)
avatar
да сделаю на мутулзе, щя рсс доделаю грабилку и возьмус за штучки на яве всякие =)
avatar
Немного грязновато реализовано.
Зачем класс no-click no-print оставили? Да и в стилях лишнее оставили.
<script type="text/javascript" src="{$DIR_STATIC_SKIN}/js/scrollm.js"></script>
заменить на:
<script type="text/javascript" src="{$DIR_STATIC_SKIN}/js/scrollm.js" />

<a name="top" id="top"></a>
<a href="#top" id="gototop" class="no-click no-print"><img src="{$DIR_STATIC_SKIN}/images/top.gif"></a>
заменить на:
<a name="top" id="top"></a>
<a href="#top" id="gototop"><img src="{$DIR_STATIC_SKIN}/images/top.gif" /></a>

#gototop { display:none; font-weight:bold; font-family:tahoma; font-size:10px; width:93px; font-size:11px; text-decoration:none; position:fixed; right:35px; bottom:5px; padding:7px 7px 7px 20px; }
#gototop:hover  { text-decoration:underline; }
заменить на:
#gototop { display:none; width:93px; position:fixed; right:35px; bottom:12px; }
avatar
И правда. Убрал то, что вы указали — ничего не изменилось, а кода меньше :) Спасибо.
avatar
Не помешало бы обновить топик и внести эти изменения.
avatar
обновил топик, спасибо
avatar
Обновили так, что половины нету теперь
avatar
сори незаметил 
<code>
кудато потерялся один =) поправил.
avatar
Спасибо! Нужная фенечка :)
avatar
А что нужно добавить после ?

А то изображение у меня не отображается…
avatar
написано же разложить скрипт и картинку…
avatar
Только вот не надо

<script type="text/javascript" src="{$DIR_STATIC_SKIN}/js/scrollm.js"></script>

заменять на

<script type="text/javascript" src="{$DIR_STATIC_SKIN}/js/scrollm.js" />

оставить первый вариант, так как, если менять, то почему то у меня в этом случае не срабатывал ajax при кликании на стрелки рейтинга, ну вот не могу объяснить почему, что то с кодом происходило, как заменил на первый вариант, заработало, проверил несколько раз возвращая назад, снова не работает, первый вариант работает корректно.

avatar
да да забыл в ночи совсем… поправил тоже.
avatar
Я говорил о том же, что и Mmka — не было видно кода )

Теперь все нормально. Спасиб
avatar
Поставил себе данное решение и теперь у меня вверху сайта все время белая полоска((( Над хидером. Может кто знает как ее убрать?
avatar
наверно поставить код акуратнее. ибо у меня на двух сайтах полоски нету, да и никто тут не жаловался.
+ писать версию ЛС и шаблон, задавай такого рода вопросы
avatar
Нет никакой полоски, тоже стоит хак, наверное лучше внимательно все заново поставить.
avatar
Все встало, автору огромное спасибо
avatar
Если позволит автор, то вот добавлю картинку — постарался сделать похожую на родную :) правда не сильно подходит, но тем не менее :) Может кому пригодится. У меня она встала нормально, пришлось немножко поправить стиль:
От автора: 
#gototop { display:none; width:93px; position:fixed; right:35px; bottom:12px; }


Поменял на 
#gototop { display:none; width:93px; position:fixed; right:-51px; bottom:80px; }


Получил вот такой результат:

Сама кнопица вот:

В общем сильно не пинайте :) Если что не так :)
avatar 
#gototop { display:none; width:44px; position:fixed; right:0px; bottom:80px; }

правильнее так. зачем вам скроллер вправо?
avatar
Так нет, он не вправо скролинг. Это только так он встаёт на то место где указан на картинке :)
avatar
я знаю куда он скроллит =) просто в вашем случае цсс вы блок размером на 51 пиксель больше чем картинка выдвигаете за правый край экрана вместо того что бы просто уменьшить размеры блока
avatar
Хм… Согласен — спасибо. :) Я не силён в арифметике, поэтому всё методом тыка =)
avatar
автор вобще всегда за всяческое проявление смекалки и любые доработки и идеи =)
avatar
Да. Не шутка. Поступила предлажуха от юзеров — сделать такой же причендал, только для того чтобы вниз опускаться :) Попробую поковырятся :)
avatar
всё тоже самое только якорь внизу ставить =) там просто разобраться на самом деле =) можно даже в середину топать если кол-во записей на листе поделить пополам и между поставить «якорь»
avatar
PS якорь в нашем случае — 
<a name="top" id="top"></a>

avatar
А для 0.4 движка?
avatar
Как для последний версии, то есть какая актуальна на данную секунду реализовать?
avatar
что то в header.tpl в 0,4 версии нет пути на фаил panel.js
avatar
там перенесли пути к жс файлам в конфиг
avatar
и после чего теперь прописывать то?
avatar
после чего нибудь… жс файлы подключаются в любом месте внутри вообще. Кроме того {$DIR_STATIC_SKIN} поменялось на {cfg name='path.static.skin'}

лучше конечно в конфиге прописать, что бы его тоже сжало вместе с остальными (не забыть после этого сбросить кэш)
avatar
подскажите по пунктам, как добавить кнопку в версии 0.4.2
avatar
Добавил в config.php после строк
"___path.root.engine_lib___/external/MooTools_1.2/plugs/vlaCal-v2.1/jslib/vlaCal-v2.1.js",
	"___path.root.engine_lib___/external/prettify/prettify.js",
	"___path.static.skin___/js/vote.js",
	"___path.static.skin___/js/favourites.js",
	"___path.static.skin___/js/questions.js",
	"___path.static.skin___/js/block_loader.js",
	"___path.static.skin___/js/friend.js",
	"___path.static.skin___/js/blog.js",	
	"___path.static.skin___/js/other.js",
	"___path.static.skin___/js/login.js",
	"___path.static.skin___/js/panel.js",

строку
"___path.static.skin___/js/scrollm.js",

Остальное сделал по описанию в первом посту… Не заработало… Подскажите, как всё-таки заставить работать на 0,4,2 версии…
avatar
Тоже интересует…
avatar
оказывается есть плагин для 0.4.2 Поделился livestreet.ru/profile/AlikMis/ в личку. Если надо, обращайтесь.
avatar
можно содержимое scrollm.js поместить в other.js текущего скина и не подключать в конфиг
avatar
Попытался реализовать сию задумку в стиле lightblue…

Поменял {$DIR_STATIC_SKIN} в объявленную {cfg name=«path.static.skin»}, изменил путь изображения. Заработало на главной странице, на других же появляется лишь видимость кнопки и исчезает.

Может кто знает вакцину?
avatar
решение оказалось проще некуда, указать полный путь к картинке /facepalm
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.