Вверх как в Вконтакте

Содержание

Оно создает прокрутку по типу контакта, очень удобно, когда не надо выискивать кнопку вверх, а просто нажать на левый край экрана. Очень удобно.
В этом дополнении всего 2 файла, файл стилей и яваскрипта.

Дополнение можно скачать либо у них на сайте, либо Здесь

Я сделал следующее, залил эти два файла в папки шаблона, т.е. стили в папку css, скрипт в папку js

И сделал по инструкции в файле «прочти меня» для файла main.tpl.php, только прописал новые адреса к этим двум файлам. Такой своеобразный хак.

И вот что у меня получилось. Посмотреть можно здесьздесь

Считаю, что выглядит не дурно. Работает только не совсем так. Вверх прокручивает, назад нет.

Т.к. я ни разу не умелец кодить, тем более в js, то будет такая просьба, может найдутся умельцы, кто сможет из этого сделать достойное решение. Например организовать плагин. Как это сделал Val

У него есть подобное Решение

Возможно и из его решения можно сделать такой же вариант, путем изменения css, но ума у меня не хватило, если у кого то хватило, то скинте, пожалуйста ваше решение. Буду признателен.

Баста, HammAli & Navai — Где ты теперь и с кем

Очень хочется сделать прокрутку по типу вконтакте.

Источник: instantcms.ru

Кнопка вверх как вконтакте в HTML + CSS

Если вам нужно с кнопкой, как ниже можно посмотреть на элемент, то скачиваем архив, и в нем найдете текстовый документ, где представлен полноценный стиль. Если говорить про скольжение, то оно плавное, где красиво, кок сделаете клик, страница поднимется.

Еще по теме: Приложение boom Вконтакте что это такое

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

Так выглядит элемент после как все установите.

Кнопка вверх с плавной скроллом в CSS

Приступаем к установке:

.besamogas <
z-index: 9999;
width: 100px;
height: 100%;
color: #FFF;
position: fixed;
top:0;
left:-100px;
cursor: pointer;
transition: all .5s ease-in-out;
background: rgba(33, 87, 152, 0.56);
>
.besamogas:before <
content: «ВВЕРХ»;
display:block;
position:absolute;
text-align:center;
color: #FFF;
font-size:36px;
line-height:100px;
font-weight:bold;
height:100%;
vertical-align:center;
writing-mode:tb-rl;
transform: rotate(180deg);
>

.besamogas:hover <
background: rgba(23, 74, 136, 0.68);
>

Также вам изначально нужно понимать, что сайт должен по своему конструктору фиксированным идти, что корректно поместилась полоса, так как она полностью будет занимать место снизу вверх по левой стороны.

Источник: zornet.ru