Кнопка вверх как Вконтакте — Sroll to top

Что делать, если Ваша страница очень длинная? Есть выход! Добавить кнопку наверх!

Если Вы активный пользователь социальных сетей, то конечно же Вы замечали эту кнопку и привыкнув к ней начинаете искать ее на всех сайтах. Не правда ли? Для длинных страниц она очень полезна — можно моментально переместиться вверх. На английском эта кнопка называется scroll to top (во вчерашнем обзоре магазина Star Wars я вскользь упомянул о ней). Сегодня мы поставим в магазин кнопку «Наверх» как вконтакте (или выберем другой подходящий вариант)

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

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

Как добавить кнопку наверх как Вконтакте?

Самый простой скрипт без стрелки-иконки. Просто надпись «Вверх» полный «закос» под вконтакт. Можно кликать в любое поле действия этой кнопки.

Инструкция по установке:

• Скачиваем архив. Загружаем в магазин.
• Заходим в настройки магазина, редактирование head и вставляем ссылку на код.

Простая кнопка наверх

Я считаю, что полностью всю левую часть экрана опасно отдавать под такую кнопку (Клиент не сможет пользоваться меню навигацией) поэтому можно воспользоваться другими примерами. Сделаем кнопку справа снизу или слева снизу.
Этот код вставляем в редактирование head магазина. Добавится красивенькая, скромненькая кнопочка «Наверх».

Кнопка наверх с картинкой

Кроме простых кнопок можно воспользоваться кнопками с изображением стрелки. Например, вот этот вариант. Установка все так же проста: скачиваем .js файл, даем ссылку на него, добавляем картинку своей кнопки.

В сети еще распространены кнопки у которых при наведении на них курсор мышки появляется решетка #. Такие мне не очень по душе т.к. появляется дополнительная ссылка на эту же страницу.

Вот и все! Я подал Вам идею, как повернуться к клиенту «лицом» и дать ему возможность удобно пользоваться сайтом. Какой вариант выберете Вы — Вам решать!

И пожалуйста, всегда проверяйте что у Вас получилось на различных разрешениях монитора. А то получится чтото типа такого: