Главная Посты Курсы Связь О сайте

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



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







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





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

Отличный выпадающий календарь на Jquery для Вашего сайта

Сегодня рассмотрим прекрасный календарь на Jquery для Вашего сайта. Ка...

Категория: JavaScript  Подкатегория: Скрипты
Дата: 15-01-2018 в 16:47:34 2


Комментарии:

Хочу прокомментировать именно эту статью. Прекрасный код!
Арсений 01-10-2018 в 00:02:31



Оставить коментарий:



Напишите email, чтобы получать сообщения о новых комментариях (необязательно):


Задача против робота. Расположите картинки горизонтально: