бесплатные списки прокси
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Кнопка Вверх для сайта - плавная анимация (делаем кнопку не такую как у всех)
Кнопка Вверх для сайта - плавная анимация
worldname Дата: Вторник, 2011-09-06, 16:59 | Сообщение # 1
Генералиссимус
Группа: lown
Сообщений: 202
Статус: Offline
Делаем кнопку Вверх на сайт. Но сделаем мы не такую кнопку как у всех, а особенную. Особенность кнопки заключается в том, что фон кнопки будет круглым и прописывать этот круг мы будем в таблице стилей 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>
Прикрепления: 3182946.jpg(3.6 Kb)
 
worldname Дата: Среда, 2011-09-07, 00:51 | Сообщение # 2
Генералиссимус
Группа: lown
Сообщений: 202
Статус: Offline
Примечание по кроссбраузерности кода кнопки на jQuery.
Или в каких браузерах это будет работать как задумывалось, а в каких нет

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

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

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

Все просто и понятно!
 
Zmey3945 Дата: Среда, 2014-12-17, 03:23 | Сообщение # 4
Рядовой
Группа: Пользователи
Сообщений: 1
Статус: Offline
Здравствуйте, у меня такая вот проблемка выскочила. В разделе "Каталог файлов", рука перемещается в левый угол низа шаблона, тобишь шаблон не разъезжается т.к. я воткнул код в "Нижняя часть сайта" в самый низ кода и рука не появляется при даже малейшем прокручивании скролом страницы, она тупа нарисована в самом низу шаблона, как говорится пока не опустишся до конца дизайна сайта её ниувидеш, НО на работает
Не подскажите как лечить такую ситуацию?
 
webanet Дата: Четверг, 2014-12-18, 16:21 | Сообщение # 5
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
Zmey3945, без адреса сайта невозможно ответить на ваш вопрос
 
florescu Дата: Понедельник, 2018-08-13, 10:08 | Сообщение # 6
Рядовой
Группа: Пользователи
Сообщений: 4
Статус: Offline
Кнопка "Вверх" работает, но поднявшись - не исчезает. Как быть?

Здравствуйте! Изучил всю информацию на uCoz по теме "Кнопка ВВЕРХ" и её производные на этом сайте и на https://forum.ucoz.ru Решения не нашел. Экспериментально установил "Кнопку ВВЕРХ" на "Страницах сайта": # В каталогах пока не поставил!!!

Шёл по алгоритму, предложенному Вами на /forum/30-160-1:

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

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

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

#toTop:hover {
opacity:1; }
#toTop {
position: fixed;
bottom: 30px;
left: 12px;
cursor: pointer;
background: none;
opacity:0.3; }

Примечание: Настроил её расположение и полупрозрачность, а яркость - при наведении курсора.

3.Установил скрипт jQuery:

(function($){$.fn.ddo = function(options){

var options = $.extend({delay : '25000'},options);

var id = $(this).attr("id");

var elements = $('#'+id+' .ddo_item').size();

var currentText = 0;

time = options.delay;

return setInterval(function() {

currentText++;

if (currentText == elements) {currentText = 0;}

if (currentText == 0) {prevText = elements - 1;} else {prevText = currentText - 1;}

$('#'+id+' .ddo_item:eq('+prevText+')').removeClass('showblock');

$('#'+id+' .ddo_item:eq('+currentText+')').addClass('showblock');

}, time);

};};)jQuery);

$(document).ready(function() {
$("#omg").ddo();
};);

$(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")};)}};);

Это ссылка на него: /triz_1/scroll.js

Вопрос: Где надо и как конкретно поработать, чтобы кнопка "ВВЕРХ" ПЛАВНО исчезала при прокрутке вверх, и ПЛАВНО появлялась, при опускании вниз сайта? Может быть где-то я допустил ошибку? Если "ДА", то какую и как её исправить?

ПРОСЬБА: Ответьте, пожалуйста.

С уважением, Роман Флореску.

Адрес сайта: https://florescu.ucoz.ru/index/0-14
 
webanet Дата: Понедельник, 2018-08-13, 18:57 | Сообщение # 7
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
florescu, в содержимом скрипта должно быть только это

Код
$(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")})}});
 
florescu Дата: Понедельник, 2018-08-13, 19:08 | Сообщение # 8
Рядовой
Группа: Пользователи
Сообщений: 4
Статус: Offline
webanet, понял свою ошибку! Благодарю Вас!С уважением, Роман Флореску.
 
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Кнопка Вверх для сайта - плавная анимация (делаем кнопку не такую как у всех)
  • Страница 1 из 1
  • 1
Поиск: