Делаем кнопку Вверх на сайт. Но сделаем мы не такую кнопку как у всех, а особенную. Особенность кнопки заключается в том, что фон кнопки будет круглым и прописывать этот круг мы будем в таблице стилей CSS
Как работает кнопка Вверх
Наша кнопка Вверх работает на jQuery. Это будет плавная прокрутка вверх страницы. В начале страницы кнопка будет не видна, но по мере прокрутки вниз появится значок, нажав на который вы плавно переместитесь наверх. При полном перемещен в самый верх кнопка исчезает сама
Код состоит из двух частей: javascript код, который нужно прописывать в код требуемых страниц, и стили.
Установка кнопки и код
В самый низ кода шаблона перед закрывающим тегом </body> ставим следующий код
Код
<a href="#" id="toTop"><img src="/bat/up.png" border="0" align="absmiddle" /></a>
<script src="/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 /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")};)}};);
Скрипт заливаем в корневую папку файлового менеджера. Корневая папка файлового менеджера - это главная страница ФМ, которая открывается при вызове ФМ
Картинка кнопки /bat/up.png вы её можете или скачать или залить свою собственную и прописать в javascript, который устанавливаете на страницах.
Редактирование кода и описание компонентов
Цитата
<a href=
"#" id="toTop"><img src="
/bat/up.png" border="0" align="absmiddle" /></a>
<script src="
/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="https://адрес вашего сайта/#">Вверх</a>
или кликабельная картинка наверх
Цитата
<a href="https://адрес вашего сайта/#" title="текст при наведении"><img border="0" align="absmiddle" src="https://адрес вашей картинки"></a>
Простая кнопка Вверх без плавного скролла
Так же можно поставить более простую кнопку, но более грубо работающую. При нажатии на которую, вы резко переместитесь наверх и видна она будет только в самом низу сайта, там, куда вы её поставили
Код простой кнопки:
Цитата
<a onclick="scroll(0,0)" href="javascript:void(0) ">
<img border="0" src="/адрес картинки на кнопку"/></a>
Лайфхак для парней: как добавить 💰 своей девушке? 
