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

worldname

Дата: Вторник, 06.09.2011, 15:59 | Сообщение # 1

Генералиссимус

Группа: Администраторы

Сообщений: 202

Статус: Offline

Делаем кнопку Вверх на сайт. Но сделаем мы не такую кнопку как у всех, а особенную. Особенность кнопки заключается в том, что фон кнопки будет круглым и прописывать этот круг мы будем в таблице стилей CSS

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

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

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

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

Code

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

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

Code

#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://webanet.ucoz.ru/scroll.js
Содержимое скрипта:

Code

$(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, который устанавливаете на страницах.

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

Quote

Синим выделено изображение кнопки
Красным выделен рабочий скрипт на jQuery
Оранжевым выделен якорь наверх
В этот код можно добавить текст. Например "Наверх". Прописывать текст можно вот в эти места

Quote

...id="toTop">ТУТ ВАШ ТЕКСТ<img src...

или

Quote

...align="absmiddle" />ТУТ ВАШ ТЕКСТ</a>...

Стили:

Quote

#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; - это фон, на котором будет показываться кнопка

Если вы пропишете в основной код текст, то в стили можно добавить атрибуты тексту

Quote

text-align: выравнивание;
padding: отступ px;
color: #цвет тексту;
text-decoration: none;

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

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

Code

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

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

Quote

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

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

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

Quote

Прикрепления: 3182946.jpg(4Kb)

worldname

Дата: Вторник, 06.09.2011, 23:51 | Сообщение # 2

Генералиссимус

Группа: Администраторы

Сообщений: 202

Статус: Offline

Примечание по кроссбраузерности кода кнопки на jQuery.
Или в каких браузерах это будет работать как задумывалось, а в каких нет

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

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

Пользуйтесь последней версией IE и не обижайтесь на более младшие версии за некоторую отсталость в развитии smile

ReincarnatE

Дата: Воскресенье, 25.03.2012, 14:21 | Сообщение # 3

Рядовой

Группа: Пользователи

Сообщений: 1

Статус: Offline

Спасибо!

Все просто и понятно!