Простая кнопка "вверх".

Back to top
Наличие кнопки "вверх" или "Back to Top", существенно улучшает юзабилити пользовательского интерфейса.  Кнопка  нужна в первую очередь для удобства посетителей вашего сайта. Если страница сайта имеет большую длину, то прокручивать вверх её не сильно удобно.
А при нажатии на кнопку, страница плавно прокручивается вверх, тем самым добавляет удобства посетителям.
Сейчас я поделюсь с вами  как установить, самую простую кнопку "вверх" без картинок в три этапа.

И так. Вместо картинок, будем использовать иконочный шрифт Font Awesome.

Подключаем в шаблоне шрифт (вставляем перед закрывающим тегом </head> строчку)

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"></link>

Туда же копируем и вторую строчку. Это наш якорь.

<a href='#' id='toTop' title='Наверх'><i class='fa fa-angle-up'/></a>

Cледующий шаг.
Добавляем стили CSS в шаблон пред строчкой:  ]]></b:skin>

#toTop{
    overflow:hidden;
    position:fixed;
    z-index:90;
    right:30px;
    bottom:31px;
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    display:none;
    color:#eee;
    text-align:center;
    background-color:#555;
    font-size:22px;
    width:42px;
    height:40px;
    line-height:40px;;
    cursor:pointer;
    -webkit-transform:translateZ(0);
    border-radius:2px;
    transition:all .5s;
}
#toTop:hover{
    background-color:#888;
    color:#fff;
}
Ну и последний шаг.
Устанавливаем маленький скрипт. Он нужен для плавности прокрутки страницы и эффекта появления нашей кнопки.

Копируем скрипт:

<script type='text/javascript'>
jQuery(document).ready(function(e){var t=e("#toTop");e(window).scroll(function(){e(this).scrollTop()>=200?t.show(10).animate({bottom:"25px"},10):t.animate({bottom:"-60px"},10)});t.click(function(t){t.preventDefault();e("html,body").animate({scrollTop:0},400)})})
</script>
Вставляем наш скрипт перед закрывающим тегом </body>. Жмем "Сохранить шаблон". Обновляем страницу.
Если вы сделали все правильно, то в правом углу появиться наша кнопка.

Для того чтобы работала наша кнопка "Back to Top", должна быть установлена библиотека jQuery.

Чтобы подключить библиотеки скриптов Jquery. Вам нужно в шаблоне перед этой строкой </head> вставить код: <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

На этом все.
Буду рад, если смог быть вам полезен. 😏

Комментарии