Кнопка "вверх" для сайта

Хотите кнопку "вверх" для своего сайта как у меня ? Тогда эта статья для Вас. Всё очень просто. Исходные файлы можно скачать здесь .

1) Скрипт использует jquery. Поэтому подключаем сначала внутри тега head jquery (Если его у Вас нет, конечно):

<head>
    <script type='text/javascript' src='/js/jquery-1.9.0.min.js'></script>
    ...
 </head>

2) Подключить сам скрипт topscroll.js.


    <head>
    <script type="text/javascript" src="/js/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="/js/topscroll.js"></script>
    ...
   </head>

3) Прописываем стили.

.scrollTop{
	display:block;
	position:fixed;
	width:60px;
	height:88px;
	bottom:10px;
	right:3%;
	background:url(images/arrow_top.png) 0 0 no-repeat;	 
	z-index:2000;
}
.scrollTop:hover{background-position:0 -90px;}

4) Вставляем строчку в HTML куда-нибудь в конец страницы:

<a id="gotop" class="scrollTop" href="#" onclick="top.goTop(); return false;" style="display:none;"></a>

5) Размещаем картинку arrow_top.png в папке images в корне сайта. Можете изменить на свою - главное соблюдать размеры и позицию: вверху располагается изображение, которое появляется в начале, внизу - при наведении мыши. Фотошоповский файл тоже прилагаю - может пригодится.

Всё!

Напомню, что на сайте нужно указывать полный путь к скриптам: Т.е. в начале ставим слэш "/" - что означает, что путь прописывается от корневого каталога. В примере же, который вы скачаете, указаны относительные пути: без слэша. Это сделано потому, что если вы разархивируете скаченные файлы на вашем локальном компьютере - то, возможно, вы окажетесь не в корневом каталоге на вашем диске, и скрипт может не сработать. Без слэша путь работает относительно текущей папки, а не от корневого каталога.

09-06-2016 в 20:05:26

Поддержать сайт:

Похожая статья: