Плавная прокрутка страницы к якорю с сохранением хеша на jQuery

Стандартное поведение браузеров при клике на якорную ссылку может сбить человека с толку. Потому что страница скроллится мгновенно, и человек не понимает, в какое место страницы он попал (вверх или вниз), да и вообще — остался ли он на данной странице, или перешёл на другую.

Чтобы это исправить, будем использовать плавную прокрутку на javascript или jquery. Плавная прокрутка до элемента ясно даёт понять, что мы остались на том же сайте, и куда именно прокрутилась страница.

План скрипта

Обычная функция типа scrollTo делает прокрутку, но это было бы слишком грубо и не учитывало все нюансы. А вот что требуется от правильного скрипта:

1) отменить стандартные действия браузера при клике по таким ссылкам;
2) определить расстояние до элемента, к которому нужно прокрутить;
3) плавно, то есть, без тормозов прокрутить страницу на это расстояние;
4) изменить window.location.hash — часть адреса страницы после решётки #.

▼ Читать дальше

Плавная прокрутка страницы на чистом javascript

На одном из сайтов нужно было реализовать прокрутку (скролл) страницы наверх с плавной анимацией. На jquery это делается одной командой:

$("html,body").animate({scrollTop:0},500);

А на чистом яваскрипте немного сложнее:

var t;
function scrolltop() {
var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(top>0) {
window.scrollTo(0,Math.floor(top/1.5));
t = setTimeout("scrolltop()",30);
} else {
clearTimeout(t);
}
return false;
}

Переменная top равна текущему расстоянию прокрутки страницы в пикселях. Каждые 30 мс эта величина уменьшается в 1,5 раза, в итоге плавно достигает нуля. Это имитация свойства ease-out в CSS анимациях.

Если вам нужно скроллить страницу наверх линейно, без ускорения, то пишем как-то так:

window.scrollTo(0,-20);

Тогда страница будет скроллиться наверх со скоростью 20 пикселей в 30 мс.

Чем обусловлен период в 30 мс? Кофмортная частота обновления экрана — примерно 30 кадров в секунду, значит, продолжительность каждого кадра — 30 мс. Для идеальной гладкости можно сделать 60 кадров в секунду, и тогда таймауты должны быть примерно по 15 мс. Но это может подтромаживать на слабых устройствах.

Сортировка таблицы на jquery без плагинов

Встала задача отсортировать таблицу на яваскрипте по любому столбику. Известный всем плагин tablesorter у меня не заработал, и я решил, что быстрее и удобнее будет написать свой скрипт. Вот, что получилось через час:

Прямая и обратная сортировка таблицы по разным столбикам

Демо

Скрипт получился из 20 строк, 1 кб (готовый tablesorter весит 13 кб и дольше «усваивается»). Ещё одно отличие: подготовительные операции для сортировки происходят по клику; это имеет смысл, потому что сортировка нужна не всем.

Первым делом нужно присвоить идентификаторы каждой строчке таблицы. Это лучше сделать сразу на сервере при выводе таблицы:

<tr id="z_1" ><td> ... </td></tr>
<tr id="z_2" ><td> ... </td></tr>
...

Теперь идентификатор будет привязан к строке с данными, и если её переставить в другое место, ничего не перепутается.

▼ Читать дальше

Выход из личного кабинета на сайте МГТС

Есть «виндовская» традиция: подтверждать каждый чих пользователя (да/нет/отмена/крестик). По возможности лучше избегать таких окошечек-вопросов.

Достаточно проверить условия:
1) действие нельзя выполнить случайно;
2) действие легко отменить

— если хотя бы одно из них верно, то можно не спрашивать подтверждения перед выполнением этого действия.

В личном кабинете МГТС есть промежуточная страничка, которая появляется по нажатию кнопки «Выход»:

Страница подтверждения выхода из системы

Во-первых, не страшно, если человек случайно выйдет из личного кабинета: это ж не система управления самолётом. Зайдёт заново — делов-то!

Но меня бесит эта страничка по другой причине: зачем после чёткого вопроса на Да/Нет дополнительно объяснять значение кнопок? Это не помогает, а наоборот сбивает с толку, заставляя лишний раз вчитываться в текст.

▼ Читать дальше