Заметили ошибку ?
Выделите это место и нажмите Ctrl + Q

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


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







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 куда-нибудь в конец страницы:


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

Всё!

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


09-06-2016 в 20:05:26





Если у Вас что-то не получилось или Вы не имеете достаточных навыков по программированию, но ВСЁ РАВНО хотите данный скрипт к себе на сайт - можете обратится ко мне за помощью, и я Вам помогу!
Хочу такой скрипт к себе на Сайт

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

Видео с YouTube в модальном окне

Сегодня разберём скрипт "просмотр видео с youtube в модальным окне"...

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


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

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



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



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


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


Последние
видео:



Шейкер-сортировка (С#)
ОГЭ по информатике. Задание 18


Подготовка к
ОГЭ


Подготовка к ОГЭ по информатике


Давайте
дружить!


Группа Вконтакте Code-Enjoy

Твиттер Александра Калужского

YouTube канал Code-Enjoy


Препод напал на тебя как вампир? Не бойся! Студланс защитит этот мир!