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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы будете первым, кто поставит оценку!