Простая кнопка "вверх".
Наличие кнопки "вверх" или "Back to Top", существенно улучшает юзабилити пользовательского интерфейса. Кнопка нужна в первую очередь для удобства посетителей вашего сайта. Если страница сайта имеет большую длину, то прокручивать вверх её не сильно удобно.
А при нажатии на кнопку, страница плавно прокручивается вверх, тем самым добавляет удобства посетителям.
Сейчас я поделюсь с вами как установить, самую простую кнопку "вверх" без картинок в три этапа.
И так. Вместо картинок, будем использовать иконочный шрифт Font Awesome.
Подключаем в шаблоне шрифт (вставляем перед закрывающим тегом </head> строчку)
А при нажатии на кнопку, страница плавно прокручивается вверх, тем самым добавляет удобства посетителям.
Сейчас я поделюсь с вами как установить, самую простую кнопку "вверх" без картинок в три этапа.
И так. Вместо картинок, будем использовать иконочный шрифт 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'/>
На этом все.
Буду рад, если смог быть вам полезен. 😏
Комментарии
Отправить комментарий