Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

Скрипт прокрутки страницы вверх делает более удобной навигацию по сайту. Все мы это знаем и много раз пользовались...
Реализуем это в нашем магазине, Только, сделаем это при помощи 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

 

Змінено користувачем tim21701
  • +1 14
Надіслати
Поділитися на інших сайтах

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

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

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

Надіслати
Поділитися на інших сайтах


  • 1 month later...

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

1.Изображение

2.Изображение

3.Изображение

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

1.Изображение

2.Изображение

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

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

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

Надіслати
Поділитися на інших сайтах


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

1.Изображение

2.Изображение

3.Изображение

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

1.Изображение

2.Изображение

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

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

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

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

z-index: 1;
  • +1 1
Надіслати
Поділитися на інших сайтах


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

z-index: 1;
ПРОПИСАТЬ не смог!

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

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

Надіслати
Поділитися на інших сайтах


  • 1 month later...
  • 1 month later...
  • 2 weeks later...
  • 1 year later...

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

В файле 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'})
Надіслати
Поділитися на інших сайтах


А у меня не получилось Изображение Версия 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"
Надіслати
Поділитися на інших сайтах


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

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

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

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

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

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

Надіслати
Поділитися на інших сайтах


  • 5 weeks later...

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

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

var pageTracker = _gat._getTracker("");

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

Змінено користувачем tim21701
Надіслати
Поділитися на інших сайтах


  • 4 weeks later...
  • 1 month later...

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

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

2722142.jpg

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

Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.