Ни о чём →
Плавная прокрутка при переходе по якорям внутри страницы
Проблема
При навигации на одностраничных сайтах, организованной с помощью анкоров (a[name=target]), а также при серфинге по длинным документам с содержанием, перелинкованном на разделы станицы, наблюдается проблема удобства использования: переход происходит мгновенно, пользователь не всегда видит куда его перебросило и на чем следует сфокусировать взор. Демо.
Внимательный читатель несомненно припомнит, что уже давно придумано до нас, например, вот тут. Однако набросанный мною за полчаса говнокод как минимум в два раза меньше по объему и не требует поиска каких-то дополнительных плагинов.
Задача
Сделать так, чтобы пользователь четко представлял в какую часть страницы его перебрасывает, привлечь внимание к цели перехода.
Решение
Будем использовать мощь jQuery. Мы перехватим переходы по анкорам и плавно прокрутим страницу к цели перехода, а после этого пару раз мигнем элементом, однозначно характеризующим цель перехода (или самою целью, как будет угодно).
При переходах извне цель просто подмигивает, необходимости крутить страницу нету. При внутренних переходах прокручиваем и подмигиваем.
Разметка страницы (псевдокод)
Джаваскрипт (jQuery подключена по умолчанию)
Демо
При навигации на одностраничных сайтах, организованной с помощью анкоров (a[name=target]), а также при серфинге по длинным документам с содержанием, перелинкованном на разделы станицы, наблюдается проблема удобства использования: переход происходит мгновенно, пользователь не всегда видит куда его перебросило и на чем следует сфокусировать взор. Демо.
Внимательный читатель несомненно припомнит, что уже давно придумано до нас, например, вот тут. Однако набросанный мною за полчаса говнокод как минимум в два раза меньше по объему и не требует поиска каких-то дополнительных плагинов.
Задача
Сделать так, чтобы пользователь четко представлял в какую часть страницы его перебрасывает, привлечь внимание к цели перехода.
Решение
Будем использовать мощь jQuery. Мы перехватим переходы по анкорам и плавно прокрутим страницу к цели перехода, а после этого пару раз мигнем элементом, однозначно характеризующим цель перехода (или самою целью, как будет угодно).
При переходах извне цель просто подмигивает, необходимости крутить страницу нету. При внутренних переходах прокручиваем и подмигиваем.
Разметка страницы (псевдокод)
ol class="toc"
a href="#цель1"
a href="#цель2"
a href="#цель3"
/ol
a name="цель1"
какой-то контент
a name="цель2"
какой-то контент
a name="цель3"
какой-то контент
Джаваскрипт (jQuery подключена по умолчанию)
// HighLight target
$(document).ready(function(){
// Это подсветит заголовок-цель при переходе с другой страницы.
var url = window.location;
var anchor = url.hash; //anchor with the # character
var anchor = url.hash.substring(1); //anchor without the # character
$('[name=' + anchor + ']').next('h2')
.fadeOut()
.fadeIn()
.fadeOut()
.fadeIn();
// Это обеспечит плавную прокрутку к цели и ее подсветку.
$('.toc a').click(function(){
var url = this;
var anchor = url.hash; //anchor with the # character
var anchor = url.hash.substring(1); //anchor without the # character
// В Опере какие-то проблемы с определением отступа сверху, поэтому считаем его по-другому.
// Кроме того, для нее нужно убрать селектор body.
if (! $.browser.opera ) {
var targetOffset = $('a[name=' + anchor +']').offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1500);
} else {
var targetOffset = $('a[name=' + anchor +']').next('h2').offset().top;
$('html').animate({scrollTop: targetOffset}, 1500);
} // if!opera
// Подмигнем заголовком три раза.
$('[name=' + anchor + ']').next('h2')
.fadeOut()
.fadeIn()
.fadeOut()
.fadeIn()
.fadeOut()
.fadeIn();
//Чтобы страница не дергалась при клике.
return false;
// Здесь надо что-нибудь сделать чтобы в строке адреса не обрезался хеш.
//window.location.replace(this.pathname + '#' + anchor);
}); // click
}); // document ready
* This source code was highlighted with Source Code Highlighter.
Демо
30.11.2010 10:19+0300