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

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

Скачиваем архив:
back-to-top.rar
388 байт 322 скачивания
Распаковываем и закачиваем скрипт на форум.

Открываем шаблон 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 - это скорость подъёма. Чем выше число, тем медленнее подъём.
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.

Похожие темы