бесплатные прокси листы
подписка на RSS форум webanet
web.a.net
Loading
Страница 1 из 11
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Кнопка Вверх для сайта - плавная анимация (делаем кнопку не такую как у всех)
Кнопка Вверх для сайта - плавная анимация
worldname Дата: Вторник, 06.09.2011, 16:59 | Сообщение # 1
Генералиссимус
Группа: lown
Сообщений: 202
Статус: Offline
Делаем кнопку Вверх на сайт. Но сделаем мы не такую кнопку как у всех, а особенную. Особенность кнопки заключается в том, что фон кнопки будет круглым и прописывать этот круг мы будем в таблице стилей CSS




Как работает кнопка Вверх


Наша кнопка Вверх работает на jQuery. Это будет плавная прокрутка вверх страницы. В начале страницы кнопка будет не видна, но по мере прокрутки вниз появится значок, нажав на который вы плавно переместитесь наверх. При полном перемещен в самый верх кнопка исчезает сама
Код состоит из двух частей: javascript код, который нужно прописывать в код требуемых страниц, и стили.

Установка кнопки и код


В самый низ кода шаблона перед закрывающим тегом </body> ставим следующий код

Код
<a href="#" id="toTop"><img src="http://webanetlabs.net/bat/up.png" border="0" align="absmiddle" /></a>
<script src="http://webanetlabs.net/scroll.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop();
};);
</script>


В таблицу стилей в самый низ прописываем следующий код:

Код
#toTop {
             width: 58px;
             height: 58px;
             background: #D9DAEE;
             -moz-border-radius: 50px;
             -webkit-border-radius: 50px;
             border-radius: 50px;
             position: fixed;
             bottom: 30px;
             right: 2px;
             cursor: pointer;}


Рабочий скрипт jQuery http://webanetlabs.net/scroll.js
Содержимое скрипта:

Код
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}};);$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")};)}};);

Скрипт заливаем в корневую папку файлового менеджера. Корневая папка файлового менеджера - это главная страница ФМ, которая открывается при вызове ФМ

Картинка кнопки http://webanet.ucoz.ru/bat/up.png вы её можете или скачать или залить свою собственную и прописать в javascript, который устанавливаете на страницах.

Редактирование кода и описание компонентов


Цитата
<a href="#" id="toTop"><img src="http://webanetlabs.net/bat/up.png" border="0" align="absmiddle" /></a>
<script src="http://webanetlabs.net/scroll.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop();
};);
</script>

Синим выделено изображение кнопки
Красным выделен рабочий скрипт на jQuery
Оранжевым выделен якорь наверх
В этот код можно добавить текст. Например "Наверх". Прописывать текст можно вот в эти места
Цитата
...id="toTop">ТУТ ВАШ ТЕКСТ<img src...
или
Цитата
...align="absmiddle" />ТУТ ВАШ ТЕКСТ</a>...


Стили:

Цитата
#toTop {
width: 58px;
height: 58px;
background: #D9DAEE;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;

position: fixed;
bottom: 30px;
right: 2px;
cursor: pointer;}

Выделенное синим и есть наш круглый фон кнопки. Размеры и цвет можно изменять по своему вкусу
width: 58px;
height: 58px; - это размеры
background: #D9DAEE; - это фон, на котором будет показываться кнопка

Если вы пропишете в основной код текст, то в стили можно добавить атрибуты тексту
Цитата
text-align: выравнивание;
padding: отступ px;
color: #цвет тексту;
text-decoration: none;



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


Так как версия PDA не поддерживает javascript, то данный вид кнопки не подойдет. Поэтому делаем просто ссылку или ссылку картинкой

Код
<a href="http://адрес вашего сайта/#">Вверх</a>


или кликабельная картинка наверх

Цитата
<a href="http://адрес вашего сайта/#" title="текст при наведении" target="_blank"><img border="0" align="absmiddle" src="http://адрес вашей картинки"></a>



Простая кнопка Вверх без плавного скролла


Так же можно поставить более простую кнопку, но более грубо работающую. При нажатии на которую, вы резко переместитесь наверх и видна она будет только в самом низу сайта, там, куда вы её поставили

Код простой кнопки:

Цитата
<a onclick="scroll(0,0)" href="javascript:void(0) ">
<img border="0" src="/адрес картинки на кнопку"/></a>
Прикрепления: 3182946.jpg(4Kb)
 
Загрузка...
worldname Дата: Среда, 07.09.2011, 00:51 | Сообщение # 2
Генералиссимус
Группа: lown
Сообщений: 202
Статус: Offline
Примечание по кроссбраузерности кода кнопки на jQuery.
Или в каких браузерах это будет работать как задумывалось, а в каких нет

Кнопка будет работать и выглядеть нормально во всех браузерах, таких как Mozilla Firefox, Google Chrome и Опера

В Internet Explorer кнопка работать будет при условии, что версия IE 9. Более древние версии, такие как IE7, IE8 кнопка будет отображаться просто на квадратном фоне и плавного скролла с плавным появлением во время прокрутки не будет
Дело в том, что IE младше 9-ой версии не понимают бордер радиус которым прописан стиль фона кнопки, и так же не обрабатывают jQuery

Пользуйтесь последней версией IE и не обижайтесь на более младшие версии за некоторую отсталость в развитии smile
 
ReincarnatE Дата: Воскресенье, 25.03.2012, 15:21 | Сообщение # 3
Рядовой
Группа: Пользователи
Сообщений: 1
Статус: Offline
Спасибо!

Все просто и понятно!
 
Zmey3945 Дата: Среда, 17.12.2014, 03:23 | Сообщение # 4
Рядовой
Группа: Пользователи
Сообщений: 1
Статус: Offline
Здравствуйте, у меня такая вот проблемка выскочила. В разделе "Каталог файлов", рука перемещается в левый угол низа шаблона, тобишь шаблон не разъезжается т.к. я воткнул код в "Нижняя часть сайта" в самый низ кода и рука не появляется при даже малейшем прокручивании скролом страницы, она тупа нарисована в самом низу шаблона, как говорится пока не опустишся до конца дизайна сайта её ниувидеш, НО на работает smile
Не подскажите как лечить такую ситуацию?
 
webanet Дата: Четверг, 18.12.2014, 16:21 | Сообщение # 5
Генералиссимус
Группа: Администраторы
Сообщений: 175
Статус: Offline
Zmey3945, без адреса сайта невозможно ответить на ваш вопрос
 
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Кнопка Вверх для сайта - плавная анимация (делаем кнопку не такую как у всех)
Страница 1 из 11
Поиск:
Новый ответ
Имя:
Текст сообщения:
Код безопасности:

© web.A.net 2007-2017
Версия PDA