Всем приветы и ответы!
Сегодня мы узнаем о том, как установить на свой сайт простую, круглую кнопку наверх! Давайте не будем тянуть кота за хвост и посмотрим как это реализовать!
Устанавливаем JS
Для начала в самый вверх страницы надо установить перед закрывающим тегом </head> библиотеку jquery, а может она уже установлена у вас:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
А в самый низ страницы саму кнопку в виде HTML кода и небольшой JS:
<a href="#" class="top-button"><img alt="наверх" src="Адрес картинки" /></a>
<script type="text/javascript">
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$(".top-button").scrollToTop();
});
</script>
В данном HTML коде надо прописать адрес на картинку самой кнопки ниже, которую вы должны скачать к себе на компьютер:
CSS стили
А теперь последний шаг, это установить в файл стилей style.css следующий код:
/* Кнопка наверх
------------------------------------------*/
.top-button {
margin:0px;
padding:0px;
position:fixed;
cursor: pointer;
bottom:25px;
right:50px;
}
.top-button:hover img {opacity:0.3;}
На этом у меня всё! Удачных решений!
А Вы оставите комментарий первым?