Плавающая кнопка наверх
Решил-таки, поставить себе кнопочку «Наверх», а то бывают случаи когда на главной страничке уж очень сильно вниз ухожу и лень тянуть скроллер вверх. На многих сайтах эта кнопка есть и я ей активно пользуюсь. Из всего, что я видел мне понравилась самая распространённая идея с применением jQuery.
В общем, чтобы не забыть, опубликую код, который используется. Для начала необходимо разместить саму кнопку, то есть область в которой она будет выводиться.
<div id="upbutton"></div>
Разместить можно практическив любом месте на сайте, так как этот элемент в CSS указан какневидимый. Главное, чтобы он не перекосил сложную структуру, но если вы собрали подобную структуру, то вы знаете гдеразместить подобный объект.
Далее необходимо разместить CSS-код. Либо это будет в файле каскадных стилей, либо в заголовке страницы.
#upbutton {background: url("/img/orca-up.png") no-repeat scroll; width: 100px; height: 40px; bottom: 30px; right: 30px; cursor: pointer; display: none; overflow: hidden; position: fixed; z-index: 1002; }
Потом разместить JavaScript код. Либо в файле, либо в заголовке страницы.
$(document).ready(function(){ $("#upbutton").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 400) { $('#upbutton').fadeIn(); } else { $('#upbutton').fadeOut(); } }); $('#upbutton').click(function () { $('body,html').animate({ scrollTop: 0 }, 400); return false; }); }); });
Вот и всё. Просто и легко. Главное не забыть скачать и положить в нужное место картинку с изображением этой кнопочки.
Тэги: программирование
Отредактировано:2020-09-09 16:27:48