аукцион / donate / услуги / RSS / распечатать / вход 
Мой мир
Вконтакте
Одноклассники

[1 сентября 2016 | 2 сентября 2016 | 20 сентября 2016]

Плавающая кнопка наверх

Решил-таки, поставить себе кнопочку «Наверх», а то бывают случаи когда на главной страничке уж очень сильно вниз ухожу и лень тянуть скроллер вверх. На многих сайтах эта кнопка есть и я ей активно пользуюсь. Из всего, что я видел мне понравилась самая распространённая идея с применением 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


Этот сайт использует файлы cookies, чтобы упростить вашу навигацию по сайту, предлагать только интересную информацию и упростить заполнение форм. Я предполагаю, что, если вы продолжаете использовать мой сайт, то вы согласны с использованием мной файлов cookies. Вы в любое время можете удалить и/или запретить их использование изменив настройки своего интернет-браузера.

Сообщайте мне о замеченных ошибках на: web@orcinus.ru. Все пожелания и советы будут учтены при дальнейшем проектировании сайта. Я готов сотрудничать со всеми желающими. В некоторых случаях, мнение автора может не совпадать с мнением автора! Phone: +7-902-924-70-49.

Top.Mail.Ru
Top.Mail.Ru LiveInternet Rambler's Top100 Яндекс.Метрика