Скрипт Кнопка вверх для сайта, для форума, для блога :: социальная сеть мам и пап, форум родителей

Часто вебмастера и админы своих сайтов начинают задавать себе вопрос: а как сделать еще лучше на своем сайте?
Предлагаю вашему вниманию замечаетльный и самый простенький, на мой взгляд, примочку "кнопку на верх с плавным прокручиванием". Сам скриптик легко и просто ставится в любом шаблоне вашего сайта, блога, форума или любого сайта на СМЗ!

Что же делает этот скрипт? Данная примочка призвана помочь человеку, который просматривает вашу страницу легко обратно возвратиться на верх сайта, одним кликом! Кнопка на верх работает плавно, поднимая низ страницы вверх!
Как только страницу продвигают вниз - справа внизу появляется полупрозрачный значок вверх (можно поставить на любой вкус для вашего оформления сайта). Кликая на нее пользователь без проблем обратно вверх продвигает страницу, не нагружая свой браузер!
Что нужно сделать, чтобы кнопка на верх заработала на вашем сайте?

Делаем 5 простых шага!

Шаг 1. Через нотепад (скачать, если у вас нету!) создаем формат файла .js и присваиваем имя v. Файл должен отображаться как v.js. Затем туда вставляем код:

Код:

Шаг 2. Вставьте в index.php между тегами <body> нижеприведенный код:

Код:

Ищем код http://ВАШ САЙТ/misc/js/v.js и меняем ссылку на ваш домен! Файл вы можете загрузить на ваше усмотрение или туда, где лежат остальные такие же файлы. Я вам указал путь, где такие файлы лежат на форуме любого движка.

примечание: если у вас форум на phpBB2,если у вас торрентпиер, ищем в своей теме overall_footer.tpl (файл темы, отвечающий за низ - футер) и вставляем сверху код там!

Шаг 3. Через нотепад (скачать, если у вас нету!) создаем формат файла .cssи даем ему имя vverh. Затем туда вставляем код:

Код:

.scrollTop {
background:url(http://ВАШ САЙТ/images/up.png) 0 0 no-repeat; display:block; width:50px; height:50px; position:fixed; bottom:10%; left:95%; z-index:2000;
}

.scrollTop:hover {
background-position:0 -58px;
}

где http://ВАШ САЙТ/images/up.png меняем на адрес рисунка, который у вас будет лежать на сайте
где строка left:95%; отвечает за расположение горизонтально снизу справа. Если вы поменяете значение 95 на 65, значок подвинется к середине страницы.

Шаг 4. Созданные раннее файлы vverh.css и v.js загружаем на ваш сайт! Файлы vverh.css кидаем в корень сайта, а v.js туда, где лежат ваши .js (или по вашему усмотрению)!

Шаг 5. Для вас выложил простую картинку с именем up.png ниже. Сохраняем себе в комп, затем кидаем в ее папку, куда вы раннее указали в http://ВАШ САЙТ/images/up.png

Все готово!

В этой теме отвечено 0 раз и проглядели 6036 раза!

Наши сервисы

Анонимное голосование