1 (16.10.2011 00:06 отредактировано dimkalinux)

Тема: [Релиз] Fancy Scroll to Top - кнопка прокрутки

Расширение добавляет кнопку в правом нижнем углу экрана, позволяющую плавно прокрутить экран к началу страницы. Кнопка появляется только на длинных страницах.

http://pic.lg.ua/x/1/2a4d45/md_260a4e94.png

Версия для PunBB 1.4
fancy_scroll_to_top.zip — версия 0.3

Смайл. Дата. Подпись.

Поделиться

2

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

Удобная штука!

Захочешь — найдешь время, не захочешь — найдешь причину.

Поделиться

3

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

Обновил алгоритм расчёта скорости прокрутки страницы.
Теперь время прокрутки всегда в интервале от 450 мс до 1.5 секунды.

Смайл. Дата. Подпись.

Поделиться

4

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

Спасибо, нужное расширение. Сам все собирался такое сделать, но все руки не доходили.
Только может эту стрелочку перенести в левый верхний угол как в сами-знаете-где?
А то в правом нижнем ее, пожалуй, не все и заметят...

Поделиться

5

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

Стрелочка как раз в нужном месте. В левой части экрана она нафиг и не нужна будет, проще самому проматать страницу чем тянуть курсор в другую часть экрана.

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

Использую: sql - php - yii - ajax - jq - js - css - bootstrap - less - html - knockout js - ruby on rails.
Интересно: css3, html5 -> appCache, workers, sockets и т.д.
Будущее: адаптивные сайты (они же и локальные приложения).

Поделиться

6

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

Периодически неработает с ошибкой : PUNBB.env.fancy_scroll_to_top is undefined

Добавлено спустя 2 минуты 34 секунды:

Если отключить addthis то все работает. Вот прямо здесь на форуме.

Добавлено спустя 27 минут 15 секунд:

Проблема решилась добавлением в исключения addthis.com  в расширении noscript для FF

Захочешь — найдешь время, не захочешь — найдешь причину.

Поделиться

7

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

В версии 0.3 улучшен алгоритм прокрутки.

Смайл. Дата. Подпись.

Поделиться

8

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

dimkalinux пишет:

Обновил алгоритм расчёта скорости прокрутки страницы.
Теперь время прокрутки всегда в интервале от 450 мс до 1.5 секунды.

У меня в IE8 почему-то в 450 мс прокручиваются страницы, равносильно ссылки top. Хотя на этом форуме именно плавно к верху прокрутка осуществляется. Может я где-то настройки не нашел по скорости?

Поделиться

9

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

В новой версии 450 мс, но с замедлением вверху.

Смайл. Дата. Подпись.

Поделиться

10

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

Установлена версия 0.3 из вашего общего архива расширений. Есть новее?
Поведение между здешним вариантом прокрутки и у себя на форуме отличается.

Поделиться

11

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

Здесь стоит 0.2.1

Захочешь — найдешь время, не захочешь — найдешь причину.

Поделиться

12

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

Если тут установлен этот плагин, то на Опере 11.52 мне его работу не видно wink

Моя сборка FluxBB 1.5 * Parserus - BBCode parser

Поделиться

13

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

hcs пишет:

Здесь стоит 0.2.1

dimkalinux пишет:

В версии 0.3 улучшен алгоритм прокрутки.

Видимо, отсюда и разница в плавности smile

Поделиться

14

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

Visman пишет:

Если тут установлен этот плагин, то на Опере 11.52 мне его работу не видно wink

Опера 11.52, вижу как тут работает этот плагин. Может у тебя в консоли есть какие ошибки?

Захочешь — найдешь время, не захочешь — найдешь причину.

Поделиться

15

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

Указанный в ссылке скрипт не загружен
[21.11.2011 21:37:21] JavaScript - http://pagead2.googlesyndication.com/pagead/show_ads.js

Указанный в ссылке скрипт не загружен
[21.11.2011 21:37:22] JavaScript - http://an.yandex.ru/system/context.js

Указанный в ссылке скрипт не загружен
[21.11.2011 21:37:24] JavaScript - http://mc.yandex.ru/watch/34550?rn=953070&wmode=5&callback=c49386&page-ref=http%3A%2F%2Fpunbb.ru%2Fsearch-recent.html&page-url=http%3A%2F%2Fpunbb.ru%2Fpost32148.html%23p32148&browser-info=s:1680x1050x32:f:10.0.45:w:1664x897:z:420:i:20111121213724:v:1716:c:1:hid:344650627:t:%5B%D0%A0%D0%B5%D0%BB%D0%B8%D0%B7%5D%20Fancy%20Scroll%20to%20Top%20-%20%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B0%20%D0%BF%D1%80%D0%BE%D0%BA%D1%80%D1%83%D1%82%D0%BA%D0%B8%20(%D0%A1%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0%201)%20%E2%80%94%20%D0%A0%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%B8%D1%8F%20v1.4%20%E2%80%94%20PunBB%201.4

Указанный в ссылке скрипт не загружен
[21.11.2011 21:37:29] JavaScript - http://s7.addthis.com/js/250/addthis_widget.js#domready=1

Указанный в ссылке скрипт не загружен
[21.11.2011 21:37:30] JavaScript - http://punbb.ru/post32148.html
Inline script thread
Uncaught exception: TypeError: Cannot convert 'PUNBB.env.fancy_scroll_to_top' to object
Error thrown at line 1, column 0 in http://punbb.ru/extensions/fancy_scroll_to_top/js/fancy_scroll_to_top.min.js:
    var scrolltotop={setting:{startline:PUNBB.env.fancy_scroll_to_top.startline,scrollto:0,scrollduration:35,fadeduration:[500,200]},controlHTML:"&uarr;",controlattrs:{offsetx:5,offsety:5},anchorkeyword:"#top",state:{isvisible:false,shouldvisible:false},scrollup:function(){if(!this.cssfixedsupport){this.$control.css({opacity:0});}var a=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto);if(typeof a=="string"&&jQuery("#"+a).length==1){a=jQuery("#"+a).offset().top;}else{a=0;}var b=parseInt(((jQuery(window).scrollTop()-a)/100),10);if(!b||b<5){b=13;}this.$body.animate({scrollTop:a},b*this.setting.scrollduration);},keepfixed:function(){var c=jQuery(window),b=c.scrollLeft()+c.width()-this.$control.width()-this.controlattrs.offsetx,a=c.scrollTop()+c.height()-this.$control.height()-this.controlattrs.offsety;this.$control.css({left:b+"px",top:a+"px"});},togglecontrol:function(){var a=jQuery(window).scrollTop();if(!this.cssfixedsupport){this.keepfixed();}this.state.shouldvisible=(a>=this.setting.startline)?true:false;if(this.state.shouldvisible&&!this.state.isvisible){this.$control.stop().animate({opacity:1},this.setting.fadeduration[0]);this.state.isvisible=true;}else{if(this.state.shouldvisible==false&&this.state.isvisible){this.$control.stop().animate({opacity:0},this.setting.fadeduration[1]);this.state.isvisible=false;}}},init:function(){jQuery(document).ready(function(c){var a=scrolltotop;var b=document.all;a.cssfixedsupport=!b||b&&document.compatMode=="CSS1Compat"&&window.XMLHttpRequest;a.$body=(window.opera)?(document.compatMode=="CSS1Compat"?c("html"):c("body")):c("html,body");a.$control=c('<div id="topcontrol">'+a.controlHTML+"</div>").css({position:a.cssfixedsupport?"fixed":"absolute",bottom:a.controlattrs.offsety,right:a.controlattrs.offsetx,opacity:0,cursor:"pointer"}).click(function(){a.scrollup();return false;}).appendTo("body");if(document.all&&!window.XMLHttpRequest&&a.$control.text()!=""){a.$control.css({width:a.$control.width()});}a.togglecontrol();c(window).bind("scroll resize",function(d){a.togglecontrol();});});}};
[21.11.2011 21:37:30] JavaScript - http://punbb.ru/post32148.html
Event thread: DOMContentLoaded
Uncaught exception: ReferenceError: Undefined variable: addthis
Error thrown at line 53, column 581 in <anonymous function: init>() in http://punbb.ru/post32148.html:
    addthis.button(d,a,e);
called from line 6, column 1885 in <anonymous function: addDOMReadyEvent>() in http://punbb.ru/include/js/min/punbb.common.min.js:
    g();
[21.11.2011 21:37:30] JavaScript - http://punbb.ru/post32148.html
Event thread: load
Uncaught exception: ReferenceError: Undefined variable: addthis
Error thrown at line 53, column 581 in <anonymous function: init>() in http://punbb.ru/post32148.html:
    addthis.button(d,a,e);
called from line 6, column 2016 in <anonymous function: addDOMReadyEvent>() in http://punbb.ru/include/js/min/punbb.common.min.js:
    g();
Моя сборка FluxBB 1.5 * Parserus - BBCode parser

Поделиться

16

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

А как сделать чтобы кнопка вниз появлялась? Иногда надо быстро прокрутить вниз?
Заранее спасибо.

Поделиться

17

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

Сделал на основе (шучу, шучу, просто цсс подправил) этого расширения полоску в стиле хабра.
Нужно бы еще сделать display:none, когда саму полоску не видно, но там нужно лезть в jQuery, а я пока не готов.
При ширине окна меньше 930 пикселей полоска исчезает. Цвет меняется при хувере.

Post's attachments

fancy_scroll_to_top_left.zip 6.32 Кб, 26 скачиваний с 2012-10-16 

You don't have the permssions to download the attachments of this post.

Сайт teploff

Поделиться

18

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

teploff, а зачем оно нужно? Если же готовое расширение - кнопка наверх на jQuery

punBB the best :)

Поделиться

19

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

Igor1, ну не знаю, как оказалось, людям привычнее щелкать слева. И по полосе во всю высоту страницы попасть получается легче, чем по небольшому диву в углу страницы. Это расширение отличается только внешним видом.

Сайт teploff

Поделиться

20

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

Мне тож кажется что удобнее слева и во всю высоту. У себя также сделал, только еще во всю ширину (смысле во весь пустой левый край форума, а еще как в контакте "вверх" нажали - появилось "обратно" - нажали обратно - перешли к тому месту где нажали "вверх". Если при отображении "обратно" чуть дернули страницу - встало в исходное состояние.  Анимация есесн.

Использую: sql - php - yii - ajax - jq - js - css - bootstrap - less - html - knockout js - ruby on rails.
Интересно: css3, html5 -> appCache, workers, sockets и т.д.
Будущее: адаптивные сайты (они же и локальные приложения).

Поделиться

21 (18.10.2012 07:45 отредактировано Igor1)

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

teploff пишет:

Igor1, ну не знаю, как оказалось, людям привычнее щелкать слева.

Зачем тогда все разработчики браузеров делают полосу вертикальной прокрутки справа, чтобы пользователям было не удобней?
ИМХО пользователь наоборот интуитивно тянется вправо к колосе прокрутки.
В конце концов, можно было бы просто нормальную кнопку расширения на Qj с помощью CSS перенести влево.

punBB the best :)

Поделиться

22

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

Igor1, ну не вам и не мне судить. Ваша аудитория, быть может, и предпочитает прокрутку справа, но мои клиенты - поколение контакта, так что..
brainiac, если вам не жалко, поделитесь своим расширением, буду премного благодарен wink

Сайт teploff

Поделиться

23 (19.10.2012 05:22 отредактировано Igor1)

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

teploff пишет:

, но мои клиенты - поколение контакта, так что..

С чего Вы взяли, что пользователи вконтакта предпочитают управление прокруткой слева?
Так что есть какие-то элементы для прокрутки?

punBB the best :)

Поделиться

24

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

У меня есть гипотеза, управление справа предпочитают правши, слева - левши.

Захочешь — найдешь время, не захочешь — найдешь причину.

Поделиться

25 (19.10.2012 08:46 отредактировано Igor1)

Re: [Релиз] Fancy Scroll to Top - кнопка прокрутки

hcs пишет:

У меня есть гипотеза, управление справа предпочитают правши, слева - левши.

Логичный аргумент. Я правша, у меня мышка справа и мне удобнее когда на интерфейсе управление справа. Среди населения всего мира левшей приблизительно 8-15%.  Это как бы намёк smile

В построении интерфейсов есть уже некоторые устоявшиеся традиции:
- ссылки меню слева (потому что европейцы читают слева на право)
- выход из аккаунта в правом верхнем углу (из-за традиционного расположения там крестика закрыть окно)
- вертикальная прокрутка справа, горизонтальная снизу

Если делать наоборот, то нужно понимать, что пользователям так может быть не удобно из-за привычки.

punBB the best :)

Поделиться