Smooth scrolling when navigating anchors inside a page
Problem
When navigating on single-page sites organized using anchors (a [name = target]), as well as when surfing over long documents with content linked to sections of the page, a usability problem is observed: the transition occurs instantly, the user does not always see where he is shifted and on what should focus the eye. Demo .
An attentive reader will undoubtedly recall what has long been invented before us, for example, here . However, the govnokod scribbled by me for half an hour is at least two times smaller in volume and does not require the search for any additional plug-ins.
The task is to
make sure that the user clearly understands which part of the page he is throwing, to draw attention to the purpose of the transition.
Solution
We will use the power of jQuery. We will intercept the anchor transitions and smoothly scroll the page to the transition target, and after that we will blink a couple of times with an element that uniquely describes the transition goal (or the goal itself, as you like).
When navigating from outside, the target simply winks; there is no need to turn the page. For internal transitions, scroll and wink.
Page markup (pseudo-code) Javascript (jQuery is enabled by default)
Demo
When navigating on single-page sites organized using anchors (a [name = target]), as well as when surfing over long documents with content linked to sections of the page, a usability problem is observed: the transition occurs instantly, the user does not always see where he is shifted and on what should focus the eye. Demo .
An attentive reader will undoubtedly recall what has long been invented before us, for example, here . However, the govnokod scribbled by me for half an hour is at least two times smaller in volume and does not require the search for any additional plug-ins.
The task is to
make sure that the user clearly understands which part of the page he is throwing, to draw attention to the purpose of the transition.
Solution
We will use the power of jQuery. We will intercept the anchor transitions and smoothly scroll the page to the transition target, and after that we will blink a couple of times with an element that uniquely describes the transition goal (or the goal itself, as you like).
When navigating from outside, the target simply winks; there is no need to turn the page. For internal transitions, scroll and wink.
Page markup (pseudo-code) Javascript (jQuery is enabled by default)
ol class="toc"
a href="#цель1"
a href="#цель2"
a href="#цель3"
/ol
a name="цель1"
какой-то контент
a name="цель2"
какой-то контент
a name="цель3"
какой-то контент
// 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.Demo