Стрелка прокрутки вверх на сайте

Стрелка вверх с плавной прокруткой

Наверняка вы теснее лицезрели у кого-то. Как рассказывается, деталь, а славно. Отыскал у кого-то в блоге и правдиво стибрил код. Это посещало некоторое количество раз: увижу у кого-то, сохраню полностью страничку (в облике HTML) на локалку и позже затеваю ковырять и выкидывать все избыточное, покуда никак не остается лишь то, будто мне необходимо. Как архитектор. :)

Будто, нешуточно: еще никак не лицезрели стрелку для мягкой прокрутки? Тогда прокрутите чуть книзу эту страничку и глядите в справедливый нательный угол. Никак не пренебрегайте позвать на появившуюся стрелку.

Осуществление предоставленного результата — при поддержки JavaScript, jQuery и CSS. Ну и картина стрелки очевидно.



Для вставки данной фишки мне довелось не считая копирования кода с 1-го интернет-сайта еще и ксернуть JS со другого ресурса — ajax.googleapis.com. У такого, в каком месте я перетянул данный результат, 2-ой скрипт тянулся оттуда (вообщем, он тянется оттуда у всех). Для чего находиться в зависимости от какого-то постороннего ресурса, ежели разрешено навалить себе? А ежели он станет «возлежать», а ежели совершенно накроется? Раскрываем в браузере скрипт сообразно указанному адресу и копируем его (Ctrl+A позже Ctrl+C, ну и Ctrl+V в собственный файл).

А как пред тем как затянуть код, я погуглил в козни про наверное ремесло и нашел, будто большая часть копируют отображение сией фишки приятель у приятеля, к тому ведь предоставляют код 2-ух скриптов, и главной тянется с ajax.googleapis.com. Т.е. в нем самом стоит гиперссылка на JS, в каком месте и лежит данный скрипт jQuery. Оно вам это нужно: находиться в зависимости от кого-то + еще продвигать его таковым методом? Я вам отчуждаю скрипты, не имеющие данного. А на грядущее, наверное испытать элементарно: ежели скрипт великий и зрительно трудно найти гиперссылку, установите розыск в коде (Ctrl+F) сообразно http://

Вообщем, 1-ая и основная дробь скрипта тянется с достоверного ресурса, вот скрипт — http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js Наверняка наверное моя параноя — становить сообразно способности все на собственный сервер. :) Рассудим: в том числе и ежели ваш сервер совершенно тормоз, ну этак наверное ведь никак не видео, чтоб помещать со постороннего ресурса. Скрипт вообщем-то весит 77 кБ. :) Никак не разумею, отчего его необходимо помещать снаружи? Ежели кто-то имеет возможность мне ответствовать, буду счастлив прочитать в комменте.

Кратче, я всё скопипастил и совместил 2 JS файла в Вотан. Залил для вас его и картину стрелки. Добавил туда еще на любой вариант файл CSS и папку sample, в которой элементарно отделанный образчик: разрешено элементарно позвать на index.html и узреть итог, или забросить готовые файлы на сервер и поглядеть вслед за тем. В едином, в readme.txt вслед за тем прописал, будто и для чего.

СКАЧАТЬ

всё скопом — http://new-wp.net/files/arrow-up.zip

Инструкция

Всё относится к файлам вашей темы WP.

1. Заливаете файл arrow-up.js в папку вашей темы WP, а стрелку arrows2.png в папку images той же темы.

2. Добавляете в файл header.php до тега </head> (там где CSS и другие JS) строку:

<script type="text/javascript" src="<?php bloginfo(‘template_directory’); ?>/arrow-up.js"></script>

3. Добавляете в файл footer.php в самый конец перед </body>:

<a class=’scrollTop’ href=’#header’ style=’display:none;’></a>

4. Добавляете в файл style.css:

/* стрелка вверх */
.scrollTop{
background:url(images/arrows2.png) 0 0 no-repeat;
display:block; width:50px; height:50px;
position:fixed; bottom:10px; left:90%;
z-index:2000;
}
.scrollTop:hover{ background-position:0 -58px; }
/* стрелка вверх */

Всё, можно проверять действие.