Простая кнопка "Наверх" для сайта на JS (с анимацией)
Скрипт прокрутки страницы к верху на jаvascript с плавной анимацией.
Полезно для новостных сайтов, для сайтов с большим количеством информации, галерей и т.д.
Установка
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. Остается только вставить нашу кнопку в шаблон. Пример для шаблонов DLE.
Открываем main.tpl и желательно в нижней части контента вставляем:
<div class="scrollup">
<i class="fa fa-chevron-up"></i>
</div>
В кнопке в качестве иконки используется шрифт Font Awesome!
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
admin
Автор8-12-2019, 22:28
ДатаJavaScript / Иконки , Кнопки / DLE хаки
Категория- Комментариев: 0
- Просмотров: 1 317
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
bootstrap Bootstrap css CSS CSS3 DLE dle fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Оцените сайт