Сышышь ты, выходи сюда,
поговорим !

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

Опубликовано: 23.08.2018

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

🎓Adobe Muse уроки🎓 63. Кнопка "НАВЕРХ" для сайта в Adobe Muse.

Всем привет! Давно собираюсь сделать кнопку или стрелку вверх для блога, но все откладывал. Сегодня наконец-то ее сделал, и решил написать небольшой пост на эту тему.



Зачем вообще нужна кнопка или стрелка вверх для сайта? Все просто, это делается для удобства пользователей. Почти все блогеры пишут огромные статьи по 3-10К символов, а кроме обычного текста, обязательно присутствует 2-3 изображения. В результате получается объемная страница, которую не очень удобно скроллить, чтобы вернуться в верхнюю часть страницы.


Уроки jQuery практика- как сделать кнопку наверх (back to top) как вконтакте

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

Способов сделать стрелку вверх для сайта немало. Одни используют дополнения в виде плагинов, другие используют JQuery и JavaScript. Что выбрать решать только вам.

Стрелка вверх на блог при помощи HTML и CSS

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

1. Подберите подходящую картинку в виде стрелки и загрузите в библиотеку изображений или в корневую директорию сайта.

2. Вставьте html код в подвал сайта (footer.php) перед закрывающимся тегом < /footer > :

<div><a href="#" title="Вернуться к началу" class="up" rel="nofollow"><img src="ссылка на изображение" alt="Вверх"></a></div>

3. Вставьте код стилей в файл style.css:

.up { width:80px; /* ширина стрелки */ position:fixed; /* фиксированное положение */ bottom:50px; /* отступ от нижней части экрана */ right:50px; /* отступ справа */ cursor:pointer; /* вид курсора при наведении */ }

4. Любуйтесь только что созданной стрелкой вверх ????

Кликабельно

Единственный минус этого метода – статичность стрелки. То есть стрелка будет видна всегда, даже если вы находитесь в верхней части сайта, в то время как стрелка, созданная при помощи JQuery и JavaScript будет появляться плавно при прокрутке страницы вниз, а так же плавно прокручивать саму страницу при нажатии на стрелку.

Среди плюсов, минимальная нагрузка на сам ресурс, так как отсутствуют скрипты.

Стрелка вверх для сайта при помощи JQuery и JavaScript

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

1. Копируем скрипт и вставляем в файл header.php перед закрывающимся тегом < /head >

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $(window).scroll(function() { if($(this).scrollTop() != 0) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } }); $('#toTop').click(function() { $('body,html').animate({scrollTop:0},800); }); }); </script>

2. Закачиваем изображение подходящей стрелки в корневую директорию сайта.

3. Вставляем код стилей для стрелки вверх в файл style.css

#toTop { width:80px; /* ширина стрелки */ position:fixed; /* фиксированное положение */ bottom:50px; /* отступ от нижней части экрана */ right:50px; /* отступ справа */ cursor:pointer; /* вид курсора при наведении */ }

4. В файл footer.php или в любое место, где хотите вывести стрелку, вставляем вот такой код:

<DIV ID = "toTop" ><img src="ссылка на изображение стрелки"></ DIV >

5. Обновляем страницу и смотрим на результат.

Кликабельно

Если вас не устраивает стрелка, аналогичным способом можно вывести кнопку, закачав ее изображение. А еще лучше, если для кнопки использовать стили CSS вместо изображения – фон, шрифт и т. д.

Стрелка вниз вверх для сайта

Стрелка вверх/вниз для сайта на WordPress легко реализуется простеньким плагином. Называется он Scroll Top and Bottom. Скачать плагин можно на официальном сайте вордпресс.

Настроек у плагина почти нет, просто скачиваем, активируем и выбираем дизайн стрелок. Вот как это примерно будет выглядеть:

Кликабельно

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

Вообще для uCoz написано столько скриптов, что не вижу смысла повторять за кем-то. Лишь дам небольшой совет новичкам, на uCoz не будут работать PHP скрипты, так как юкоз сайты постороены на HTML и CSS. Точнее PHP тоже можно подключить, но только если у вас премиум аккаунт.

rss