Бутон обратно горе

Идеята на подобен бутон е да върне потребителя от дъното на страницата към нейното начало, нещо като навигация. За целта до този момент ползвах възможностите само на HTML. Увлечен от възможностите на jQuery реших да разчупя модела и го поднеса в по-добра светлина, а заедно покажа как става на мой задморски приятел. Всеки друг заинтересуван да се чувства приобщен.

jQuery ще модифицира бутона по следния начин. Когато сме горе в прозореца на браузъра или върнали в това място, бутонът ще бъде невидим и няма да дразни окото с неуместното си присъствие. Спуснем ли се надолу по документа, бутонът ще изплува в конкретна точка на браузъра, предлагайки сервис.

В мрежата се срещат редица готови решения. Аз обаче ги намирам за несъвършени. Те работят само при включен интерпретатор в браузъра. А е повече от ясно, че битуват и такива оригинали, които чули с края на ухото си, изключват изпълнение на javascript под претекст, че така са по-неуязвими в мрежата. Това ме накара да помисля и за тях, и решението се сведе до обединения на старото с новото.

A-Ha - Don't Do Me Any Favours

В качеството на интерактивен елемент използвам указател (link), който се цели в котва. Това е познат начин и ще работи при изключен JavaScript. Цел на нашия бутон е обичаен div, разполoжен непосредствено след таг <body>.

НА РАБОТА

HTML структура

<html>
 <head>
<script src="jquery.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
 </head>
<body>
<div id="ontop"><noscript><p>javascript is off</p></noscript></div>
 <div id="wrapper">
  <div id="header"></div>
  <div id="content"></div>
  <div id="footer"></div>
 </div>
<div id="backtotop" title="Нагоре"><a class="katapult" href="#ontop" ></a></div>
</body>
</html>

div-елементът има присвоен идентификатор под име ontop. Идентификаторите предлагат удобството да бъдат цел. Отделно ще го стилизираме с CSS. div-елементът съдържа тагове <noscript></noscript>. Тези тагове сработват при изключена поддръжка на скриптове. Вътре между тях е поместен параграф, който ще напомня на потребителя за изключен JavaScript. Например, "Вашият браузър не поддържа JavaScript!".

CSS

#backtotop {
    position: fixed;
    bottom: 10px;
    right:10px;
}
   a.katapult {
    width: 25px;
    height: 25px;
    background: url("image.gif") no-repeat 0 0;
    display: block;
}
   a.katapult:hover {
    background-color: #f5ec82;
    border: 1px solid red;
    -webkit-transition: 2s;
    -moz-transition: 2s;
    transition: 2s;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
   noscript p {
    background-color: #FFFCDF;
    border-bottom: 1px solid #303134;
    color: #DC6919;
    font: bold 14px Verdana;
    line-height: 3;
    text-align: center;
    text-transform: uppercase;
}

В стиловете нищо свръхестествено не се забелязва. Основата на оформлението залага на фиксирано позициониране на бутона. Останалото е пълна свобода на въображението и резонно впрегнах възможностите на CSS3.

jQuery скрипт

$(document).ready(function(){
 $("#backtotop").hide();
 $(function () {
  $(window).scroll(function () {
   if ($(this).scrollTop() > 400) {
    $('#backtotop').fadeIn();
   } else {
    $('#backtotop').fadeOut();
   }
  });
  $('#backtotop a').click(function () {
   $('body,html').animate({
    scrollTop: 0
   }, 1300);
   return false;
  });
 });
});

JavaScript доверяваме на framework jQuery по разбираеми причини. В ред 2 прихващаме идентификатора на бутона, за да го скрием. След което в анонимна функция указваме, че към прозореца на браузъра закачаме метод scroll().

В ред 5 (> 400) определям след колко пиксела да изгрее бутона. Ако значението е 0, ще реагира мигновено, въпрос на вкус. Следват метод fadeIn(), показващ бутона.

В ред 11 закачаме на атрибут а от идентификатор backtotop, да следи клик. При настъпване на събитието, се изпълнява метод анимация и скролиране в изходна позиция.

В ред 14 указваме в милисекунди за колко време да тече анимацията, а в ред 15 забраняваме дефолтното държание на браузъра.

Отлично! Постигнахме желаното.

DEMO

Погледнете долу в дясно за малка червена стрелка. Това е.
Изключете изпълнението на JavaScript и презаредете страницата. Би следвало да се появи сигнална лента в жълто с предупреждаващ надпис.

до нови срещи ^.^

12.10.2011 profruit

WEB |

5 Response to "Бутон обратно горе"

зайче Said,

13 октомври 2011 г. в 19:38

Ехаа, добавил си ефект. Ще се пробва XD

Profruit Said,

13 октомври 2011 г. в 19:53

Еее, ти не живееш ли от другата страна на морето все още?

зайче Said,

13 октомври 2011 г. в 21:17

Мда, що? Очаква се да не се види ефекта ли? Убаф е, заплюх си го и ще си го ползвам със здраве ^^

Profruit Said,

13 октомври 2011 г. в 21:53

...тогава продължаваш да си задморски приятел от анонса, те затова.

мега глобални етикети
-------------------------------------------
центровка на запалването на волга газ 24
какво означава името ми erhan
маски за бал
команда за изтриване на лубунту
кожуси от турция
редактиране на файл с putty
венци пенчев
как да превърнем убунту в windows
eлектронно запалване за вартбург
kulturisti photoshop
блог долината на слепите пясъци
милко кертиков
kak da ubiem vampir
турски кожуси
руски презерватив
как се слага кирилица на ubuntu без български
температурата извън самолета
уроспии
css главата на ламята
чилийски филм публичен дом
www.koja ot leipard
зимни боти булдозер
къща музей пабло неруда
ubuntu трикове
пабло неруда живял в град музей
дракула няма отражение в огледалата
валентин башев
къси клавиши луникс
kilometrash za stella

зайче Said,

14 октомври 2011 г. в 8:36

Все изпаднали в голяма нужда откриват блога ти като панацея XD
Малко отсам морето:
-------------------------------------------
i6iaz ot kakvo se polo4ava i kakvo e
таралеж на скара
youtube qkoruda (това особено ме озадачи)
как да направя арак (нещо за поркане е)
tseli chovek s banan
самые большие люди в мире
дори спрелия часовник показва верния час (веднъж дневно, бих добавил)
похудение фото до и после
kak se vika na golia ohliuv (??)
изображения на снежанка
s dve dumi
za6to ne e pravilno da se pi6e kmetica
zenski orgazam kakvo e 4ustvoto
kak e pravilno da se kage kogo ili kogo
карощи коментаряь
vrediteli pq domati

Profruit

openHAB на български

Умен звънец в openHAB

Tasmota Multipress

DIY 12V 1A WiFi Router UPS

Zigbee2MQTT клониране

LD2410 - бюджетен датчик присъствие в openHAB