how-to [How-To] Скрипт прокрутки страницы вверх...

[tim21701]

Скрипт прокрутки страницы вверх делает более удобной навигацию по сайту. Все мы это знаем и много раз пользовались...
Реализуем это в нашем магазине, Только, сделаем это при помощи jQuery, со всеми эффектами, которые он нам даёт.



Пример работы можно увидеть на сайте автора. Если прокрутить страницу в самый низ - увидите кнопку (внизу, справа)... И так, приступим.

1). Качаем скрипт scrolltopcontrol.js (внизу или с сайта автора) и копируем в папку catalog/view/javascript/jquery
2). Рисуем кнопку.... (или берём внизу) и копируем её в папку catalog/view/theme/ВАША_ТЕМА/image
3). Открываем файл catalog/view/theme/ВАША_ТЕМА/template/common/header.tpl и перед тегом </head> добавляем:
 

<script type="text/javascript" src="catalog/view/javascript/jquery/scrolltopcontrol.js"></script><script type="text/javascript">var pageTracker = _gat._getTracker("");pageTracker._initData();pageTracker._trackPageview();</script>

Всё.
Сохраняем. Закрываем. Проверяем.

============================================================================
Имя Вашего изображения (и размер), необходимо указать в самом скрипте, (строка 12).
В этом же файле настраивается скорость, эффект fade, подсказка к кнопке и другие настройки...

...........
..60х59........55х55............99х35................101х86.............64х47............96х33

============================================================================
+ Добавляем "стили" (Расположение кнопки на странице). Сообщение №32 в этой теме
============================================================================

scrolltopcontrol.zip

 

Змінено 4 березня 2015 користувачем tim21701

[AlexFisher]

Самое оно! Спасибо
 

[remix8080]

Спасибо за скрипт!

[tim21701]

Добавил ещё пару изображений для кнопки.

[gdi31]

Поставил ради эксперимента над IE9. Во всех используемых мною браузерах всё ОК, но в недоношенном IE9 опять глухо как в танке :angry: , а 1/3 часть посетителей моего сайта использует именно этого инвалида.

Эксперимент удался и видимо приживётся на моём сайте.

Автору темы очередной раз спасибо!

[un10ck]

Все норм :)

Лови +

[gdi31]

Как вызволить «Серый кружочек» из цепких рук «Черного прямоугольника» ?

1.

2.

3.

Если вдруг получится вырваться ему из плена мечтаю шоб он устроился на свободе примерно так:

1.

2.

Есть у кого план (не тот что курят) как освободить бедалагу?

Буду очень признателен за спасение "серого" :).

В живую как всё вертится можно "сфотографировать" по ссылке у меня в профиле.

[ELITE]

картинки не видно,но она есть.

[EvzeNsx]

Как вызволить «Серый кружочек» из цепких рук «Черного прямоугольника» ?

1.

2.

3.

Если вдруг получится вырваться ему из плена мечтаю шоб он устроился на свободе примерно так:

1.

2.

Есть у кого план (не тот что курят) как освободить бедалагу?

Буду очень признателен за спасение "серого" :).

В живую как всё вертится можно "сфотографировать" по ссылке у меня в профиле.

пропиши для "серого кружочка" в css

z-index: 1;

[gdi31]

пропиши для "серого кружочка" в css

z-index: 1;

ПРОПИСАТЬ не смог!

А вот ВЫПИСАТЬ получилось! :) (в "чёрном прямоугольнике" удалил эту строчку).

Спасибо огромное в содействии спасения "серого".

[burt]

Спасибо за скрипт! Работает отлично.

[mentlee]

Ссори! Прокрутка заработала, после общения со службой поддержки....

Извините братцы...лохонулся....от незнания и недоверия все :-)))....

[tim21701]

...от незнания и недоверия все ))....

Эт точно.

[ArtemStreltsov]

А как мне сделать, чтобы стрелочка находилась не справа, а слева ?

[luka29]

А у меня не получилось :( Версия 1.5.1.2. У кого-нибудь работает? Где копаться?

[Vitat]

Имеет ли значение версия ОС? Версия 1.5.1 - даный скрипт прописан но ничего не отображается.

[denny83]

А как мне сделать, чтобы стрелочка находилась не справа, а слева ?

В файле scrolltopcontrol.js строке поменять с:

.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})

на:

.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, left:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})

[denny83]

А у меня не получилось Версия 1.5.1.2. У кого-нибудь работает? Где копаться?

Скорей всего у тебя шаблон не default копайся в scrolltopcontrol.js

Строка:

controlHTML: '<img src="catalog/view/theme/default/image/scroll_icon.png" style="width:55px; height:55px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"

[Toxa]

Умные головы, подскажите может кто знает - как разместить эту картинку-ссылку "наверх" не относительно угла окна браузера, а относительно центра окна браузера?

Сейчас в файле scrolltopcontrol.js есть настройки которые задают положение относительно угла браузера по оси Х и Y:

controlattrs: {offsetx:50, offsety:90}, //offset of control relative to right/ bottom of window corner

но если "сузить" окно браузера, то картинка "вверх" наезжает на контент, да и удобнее когда эта ссылка находится не в самом низу а ближе к "контенту".

Т.е. нужно указать положение ссылки относительно центра окна браузера, а не относительно нижнего правого угла. Нет ли у кого решения?

Готов выслать денежку на пиво :)

[Rockwool]

Сделал все как по описано, и кнопка так и не явилась на свет...

[papay]

картинки самой не видно а скрипт работает даже если вниз не опускаться, так и должно работать?

еще вопрос за что отвечает эта строчка ?

var pageTracker = _gat._getTracker("");

на неё ругается FireBug

Змінено 16 лютого 2013 користувачем tim21701

[Ilya]

Работает отлично! Огромное спасибо!

[Coced]

на 1.5.4.1 не работает(

[tim21701]

на 1.5.4.1 не работает(

Только что поставил на "чистый" ocstore 1.5.4.1 - всё работает.

После установки, удалите кеш и перезагрузите страницу. Если сделали ВСЁ - как написано, работать будет.

[Toxa]

И все таки, никто не встречал решение с привязкой кнопки "Вверх" к краю основного контента, а не к углу экрана?

Готов заплатить за решение