^ Наверх
Тегам
apple tv, bootstrap, centos, cheat sheets, chyrp, cms, cp1251, css, css-framework, daos, ddos, denwer, disqus, dns, doodles, efix, endels, evernote, firefox, flash, forex, forex mmcis group, google, google drive, hosts, httrack, hypercomments, input, intensedebate, ipad pro, iphone, iphone 6s, iphone 6s+, jquery, json, lenovo, livejournal, lj, mac os, mac pro, mamp, microtext, monstra cms, ping-admin, reg.ru, selectel, simaphone, stick footer, template cms, textpattern, to do, toup, uptime, utf8, vds, xampp, агс, банковская карта яндекс.денег, блог-клиент, блоггинг, верстка, виртуальный сервер, выравнивание в блоке, гидеон сундбек, гоша, дудлы, задачка, идея, инвестиции, интернет-магазин, кино, клиенты, кодировка, комменты, кросспостинг, микро cms, молния, мониторинг, мотив, мошенники, наверх, облако, обои, оптимизация, оффлайн, оффтоп, ошибки, платон, почта для домена, прижать футер, проверка flash, рип сайта, сателлиты, ссср, старт, техника, управление временем, успехи, фотоальбом, фоторепортаж, хостинг, цели, шпаргалки, шпоры, электронные деньги, яндекс, яндексдиск, яндекс мерика, яша
Сортировать по:

Скролл наверх jquery

Ну что, улучшаем юзабилити своего сайта? Тогда обязательно стоить облегчить труды посетителя и добавить кнопочку «Наверх», как это сделал я.

Для этого можно использовать простую ссылку с атрибутом href=”#” внизу сайта, как собственно у меня было ранее. А можно добавить более элегантное решение, с использованием библиотеки jquery и вставить в код чуть больше строчек.

И так… подключаем библиотеку

<script src=“js/jquery-1.7.1.min.js”></script>

Добавляем обработчик событий

$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$(’#toTop’).fadeIn();
} else {
$(’#toTop’).fadeOut();
}
});

$(’#toTop’).click(function() {
$(‘body,html’).animate({scrollTop:0},800);
});
});

После добавляет код с кнопкой

<div id=“toTop”>^ Наверх</div>

Украшаем кнопку css

#toTop {
width:100px;
border:1px solid #ccc;
background:#01A5CA;
text-align:center;
padding:5px;
position:fixed; /* this is the magic */
bottom:10px; /* together with this to put the div at the bottom*/
right:10px;
cursor:pointer;
display:none;
color:#fff;
font-family:verdana;
font-size:11px;
}

Оп, ля, все готово! Скрипт работает с разными версиями jquery, в примере, 1.7.1, у меня подключена 1.4.3.

comments powered by HyperComments

Оставьте комментарий