При прокрутки страницы вниз, слева или справа появляется стрелка. При уводе мыши в край экрана, в сторону стрелки, появляется полупрозрачная светлая вертикальная полоса, при нажатии на которую вы переместитесь в начало страницы. На небольшом разрешении экрана, появляется небольшой квадрат, вместо полосы.
Пример можно увидеть на странице новостей - http://cabinetadmina.ru/newspage.php
Скачиваем архив: Распаковываем и закачиваем скрипт на форум.
Открываем шаблон
Если у вас уже подключена библиотека jQuery, то:
ставить не нужно.
Далее находим:
После найденного вставляем:
В конец темы стиля добавляем:
Небольшие пояснения.
Обратите внимание, что в нашем коде css нет ссылки на изображение. Наше изображение включено в css в виде
Если вам не нужно изображение, а нужна просто надпись - "Вверх", то это можно сделать так, у элемента
Потом в:
Добавить слово - "Вверх":
Для отображения полосы с правой стороны экрана, в html структуре элемента меняем класс
Скорость подъёма можно отрегулировать под себя, в файле скрипта
400 - это скорость подъёма. Чем выше число, тем медленнее подъём.
Пример можно увидеть на странице новостей - http://cabinetadmina.ru/newspage.php
Скачиваем архив: Распаковываем и закачиваем скрипт на форум.
Открываем шаблон
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>
Код: Выделить всё
<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);
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.