Кнопка "Наверх" для сайта
Сегодня я расскажу , Вам, как сделать простую кнопку на верх для сайта на cms DLE и не только.
В качестве кнопки используется шрифт Font Awesome. Используем js.
И так приступим к установке:
1. Открываем css файл и в конец файла дописываем:
div.scrollup {
position: fixed;
color: #fff;
background-color: #ddd;
right: 20px;
bottom: 0px;
padding: 4px 10px;
font-size: 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
cursor: pointer;
display: none;
text-align: center;
}
div.scrollup:hover {
background-color: #000;
}
2. Вставляем скрипт в main.tpl либо в js файл:
$(function() {
$('.scrollup').click(function() {
$("html, body").animate({
scrollTop:0
},1000);
})
})
$(window).scroll(function() {
if ($(this).scrollTop()>200) {
$('.scrollup').fadeIn();
}
else {
$('.scrollup').fadeOut();
}
});
3. Вставляем нашу кнопку в шаблон нашего сайта, а именно в main.tpl в самую нижнюю часть:<div class="scrollup">
<i class="fa fa-chevron-up"></i>
</div>
Всё на этом установка закончена, Вы получите результат такой же как у нас на сайте.
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
bootstrap Bootstrap css CSS CSS3 dle DLE fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Как обозначается тег в HTML