Подъём вверх страницы. jQuery

Модификации основанные на языке JavaScript.

Скрипты(Огромная галерея скриптов, на любой вкус и цвет)
Аватара пользователя
CabinetAdmin

Подъём вверх страницы. jQuery

CabinetAdmin 12 фев 2013, 18:01 Сообщение

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

Пример можно увидеть на странице новостей - newspage.php

Скачиваем архив:
back-to-top.rar
(388 байт) 125 скачиваний


Распаковываем и закачиваем скрипт на форум.

Открываем шаблон overall_header.html, перед </head> ставим:

Код: Выделить всё

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="путь до файла/back-to-top.js"></script>


Если у вас уже подключена библиотека jQuery, то:

Код: Выделить всё

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

ставить не нужно.

Далее находим:

Код: Выделить всё

<a id="top" name="top" accesskey="t"></a>


После найденного вставляем:

Код: Выделить всё

<div id="back-to-top" title="{L_BACK_TO_TOP}" class="on-left"></div>


В конец темы стиля добавляем:

Код: Выделить всё

/* Global back to top of page ---------------------------------------- */ #back-to-top { display: none; z-index: 10; position: fixed; top: 0; padding: 15px; width: 24px; height: 24px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAwFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMDQ0jJCVHSkxrcHOEiY2SmJ2epKmjqq+lrLGor7SosLWpsbaqsbaqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbf8/f39/f38/Pz5+frx8vPq6+3g4+XZ3d/O09bJztHDyc26wMS3vcKxuL2ttLmrsreqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbdxj7yeAAAAJnRSTlMAAAAAAAAAAQUKDhUaISc0QU9ganF6h5SeqbW9xtLc5O7z+Pv9/jTWlcgAAADKSURBVCjPdZLBDoMgDIZ74Ag6dOp0IThISOaimck89/3fam5YmE6/g6H9kt+mAMwjzleFVjW5WBrw/SYXJEwlopAGf2gliTOusZkXErfY00cI8yew5bO44A4lg8SGqu/jbAKKUIzOPUORw5WOU+dc96KqBh2C3EwIU2Bi0IeR5iIxPbzoJl9rihrcwkBRjT90JO708wJ3yWFvI4g3Dqw6WAkT7cESmbTbvkn9RWUbY2S42lWaTuNj4FWYzZT855XMKquV1qqWfGm8AZW4Zl7U37UsAAAAAElFTkSuQmCC") center 15px no-repeat; cursor: pointer; opacity: 0.6; } #back-to-top.on-left { left: 0; } #back-to-top.on-right { right: 0; } #back-to-top:hover { background-color: rgba(255, 255, 255, 0.6); opacity: 1.0; } #back-to-top.tower { height: auto; bottom: 0px; }




Небольшие пояснения.

Обратите внимание, что в нашем коде css нет ссылки на изображение. Наше изображение включено в css в виде data: URL:

Код: Выделить всё

background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAwFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMDQ0jJCVHSkxrcHOEiY2SmJ2epKmjqq+lrLGor7SosLWpsbaqsbaqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbf8/f39/f38/Pz5+frx8vPq6+3g4+XZ3d/O09bJztHDyc26wMS3vcKxuL2ttLmrsreqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbdxj7yeAAAAJnRSTlMAAAAAAAAAAQUKDhUaISc0QU9ganF6h5SeqbW9xtLc5O7z+Pv9/jTWlcgAAADKSURBVCjPdZLBDoMgDIZ74Ag6dOp0IThISOaimck89/3fam5YmE6/g6H9kt+mAMwjzleFVjW5WBrw/SYXJEwlopAGf2gliTOusZkXErfY00cI8yew5bO44A4lg8SGqu/jbAKKUIzOPUORw5WOU+dc96KqBh2C3EwIU2Bi0IeR5iIxPbzoJl9rihrcwkBRjT90JO708wJ3yWFvI4g3Dqw6WAkT7cESmbTbvkn9RWUbY2S42lWaTuNj4FWYzZT855XMKquV1qqWfGm8AZW4Zl7U37UsAAAAAElFTkSuQmCC") center 15px no-repeat;


Если вам не нужно изображение, а нужна просто надпись - "Вверх", то это можно сделать так, у элемента #back-to-top { удалить:

Код: Выделить всё

width: 24px; height: 24px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAwFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMDQ0jJCVHSkxrcHOEiY2SmJ2epKmjqq+lrLGor7SosLWpsbaqsbaqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbf8/f39/f38/Pz5+frx8vPq6+3g4+XZ3d/O09bJztHDyc26wMS3vcKxuL2ttLmrsreqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbeqsbdxj7yeAAAAJnRSTlMAAAAAAAAAAQUKDhUaISc0QU9ganF6h5SeqbW9xtLc5O7z+Pv9/jTWlcgAAADKSURBVCjPdZLBDoMgDIZ74Ag6dOp0IThISOaimck89/3fam5YmE6/g6H9kt+mAMwjzleFVjW5WBrw/SYXJEwlopAGf2gliTOusZkXErfY00cI8yew5bO44A4lg8SGqu/jbAKKUIzOPUORw5WOU+dc96KqBh2C3EwIU2Bi0IeR5iIxPbzoJl9rihrcwkBRjT90JO708wJ3yWFvI4g3Dqw6WAkT7cESmbTbvkn9RWUbY2S42lWaTuNj4FWYzZT855XMKquV1qqWfGm8AZW4Zl7U37UsAAAAAElFTkSuQmCC") center 15px no-repeat;


Потом в:

Код: Выделить всё

<div id="back-to-top" title="{L_BACK_TO_TOP}" class="on-left"></div>


Добавить слово - "Вверх":

Код: Выделить всё

<div id="back-to-top" title="{L_BACK_TO_TOP}" class="on-left">Вверх</div>



Для отображения полосы с правой стороны экрана, в html структуре элемента меняем класс on-left на on-right:

Код: Выделить всё

<div id="back-to-top" title="{L_BACK_TO_TOP}" class="on-right"></div>



Скорость подъёма можно отрегулировать под себя, в файле скрипта back-to-top.js:

Код: Выделить всё

$('body:not(:animated),html:not(:animated)').animate({ scrollTop: 0 }, 400);


400 - это скорость подъёма. Чем выше число, тем медленнее подъём.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект


Похожие темы

Вернуться в «JavaScript / jQuery»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 2 гостя