Хотите кнопку "вверх" для своего сайта как у меня ? Тогда эта статья для Вас. Всё очень просто. Исходные файлы можно скачать здесь .
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 в корне сайта. Можете изменить на свою - главное соблюдать размеры и позицию: вверху располагается изображение, которое появляется в начале, внизу - при наведении мыши. Фотошоповский файл тоже прилагаю - может пригодится.
Всё!
Напомню, что на сайте нужно указывать полный путь к скриптам: Т.е. в начале ставим слеш "/" - что означает, что путь прописывается от корневого каталога. В примере же, который вы скачаете, указаны относительные пути: без слеша. Это сделано потому, что если вы разархивируете скаченные файлы на вашем локальном компьютере - то, возможно, вы окажетесь не в корневом каталоге на вашем диске, и скрипт может не сработать. Без слеша путь работает относительно текущей папки, а не от корневого каталога.
Оставить коментарий: