Домой / Сайтостроение / Кнопка наверх для сайта — Создай сам быстро и бесплатно!

Кнопка наверх для сайта — Создай сам быстро и бесплатно!

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

Как создается кнопка наверх для сайта с помощью специального плагина и без него на jQuery и CSS? Узнай сейчас!

Здравствуйте, уважаемые друзья и гости блога! В этой статье будет рассказано и показано, как создается кнопка наверх для сайта при помощи специального плагина, а также на jQuery и CSS. Если Вам это интересно, то пожалуйста давайте приступим к изучению и созданию кнопки наверх для сайта. Поехали ...


Как Вы уже наверное знаете, что на любом сайте самое главное — это контент! И не все сайты могут похвастаться, что у них страницы имеют сжатый и краткий вид, который не приходится долго скролить (прокручивать), чтобы все прочесть. Есть страницы сайтов, где контент занимает очень большое пространство и чтобы прокрутить страницу сайта для изучения необходимого материала, нужно скролить его очень долго. А затем чтобы попасть на верх страницы надо крутить колесиком мышки в обратную сторону. Но есть инструмент облегчающий жизнь вебмастеру и пользователю сайта — это кнопка «НАВЕРХ»!

Теперь давайте узнаем, как делается кнопка наверх для сайта с помощью нескольких инструментов ...

Кнопка наверх для сайта при помощи плагина WPFront Scroll Top

Для того, чтобы создать кнопку наверх для сайта быстро и без знаний языка программирования jQuery и CSS, необходимо воспользоваться простой установкой плагина для движка WordPress - WPFront Scroll Top.

Вам просто-напросто нужно забить в поиске новых плагинов своей админки его название и он обнаружится автоматически. Также и установка этого плагина будет не проблемой. Вам нужно нажать на кнопку «Установить», а затем «Активировать»:

плагин WP
плагин WP

Настройка плагина WPFront Scroll Top довольно проста и к тому же он обладает огромным набором кнопок «НАВЕРХ» для вашего сайта. Вот убедитесь сами:

плагин WPFront Scroll Top
плагин WPFront Scroll Top

Что касается настройки плагина WPFront Scroll Top? Сейчас расскажу про самые основные моменты ...

А лучше покажу видео — установка и настройка плагина WPFront Scroll Top:

Как сделать кнопку наверх для сайта плагином WPFront Scroll Top? Смотри!


Теперь идем дальше и давайте узнаем, как можно при помощи jQuery и CSS создать на своем сайте замечательные кнопки «НАВЕРХ» ...

Создаем кнопку для сайта «НАВЕРХ» на jQuery и CSS!

Для того, чтобы создать кнопку плавной прокрутки страниц вашего сайта на jQuery и CSS Вам необходимо иметь всего пару вещей. Я их Вас сейчас дам!

Вот примерная картинка самой кнопки «наверх»:

icon_top
icon_top

Но Вы сможете изменить эту картинку на свою в любое время!

Также нужен код jQuery и CSS, которые являются основными элементами в построении кнопки наверх для сайта. Вот этот код:

  • Для вызова кнопки «наверх» после основного контента вашей страницы сайта или перед тегом </body> размещаем следующий HTML код:
<a href="#" class="scrollup">Наверх</a>
  •  Теперь нужно подключить библиотеку JQuery и для этого между тегами <head>...</head> вставляем вот такой код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  •  После подключения библиотеки JQuery Вам необходимо вставить вот такой код JQuery:
<script type="text/javascript">
$(document).ready(function(){

$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});

$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
  •  Теперь подключим CSS стили:
.scrollup{
width:40px;
height:40px;
opacity:0.3;
position:fixed;
bottom:50px;
right:100px;
display:none;
text-indent:-9999px;
background: url('icon_top.png') no-repeat;
}

Вот теперь можно посмотреть, что из этого получилось: КНОПКА «НАВЕРХ» НА jQuery и CSS

На этом заканчиваю свой рассказ сегодня! Всем спасибо за внимание! Удачи и успехов в создании Вашей собственной кнопки наверх для сайта!

До новых встреч!



Про Валерий Бородин

Проверьте также

как сделать сайт самому с нуля бесплатно

Как сделать сайт самому с нуля бесплатно? Начало или вступление!

Начало цикла постов! Как сделать сайт самому с нуля бесплатно? Если Вам будет интересно, продолжу! …

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу