ページ内のアンカーをナビゲートする際のスムーズなスクロール

問題



アンカー（[name = target]）を使用して編成された1ページのサイトをナビゲートするとき、およびページのセクションにリンクされたコンテンツを含む長いドキュメントをサーフィンするとき、ユーザビリティの問題が観察されます：そして何に焦点を合わせるべきか。 デモ



気配りのある読者であれば、たとえばここにあるように、以前に発明されたものを間違いなく思い出すでしょう。 ただし、私が30分間走り書きしたgovnokodは、少なくとも2倍の音量であり、追加のプラグインを検索する必要はありません。



挑戦する



遷移の目的に注意を引くために、ユーザーがページのどの部分をスローしているかを明確に理解できるようにします。



解決策



jQueryのパワーを使用します。 アンカートランジションをインターセプトし、ページをトランジションゴールまでスムーズにスクロールします。その後、トランジションゴールを一意に特徴付ける要素（または、ゴール自体）を数回点滅させます。



外部からナビゲートするとき、ターゲットはウィンクするだけで、ページをめくる必要はありません。 内部遷移の場合、スクロールしてウィンクします。



ページレイアウト（擬似コード）



ol class="toc"

a href="#1"

a href="#2"

a href="#3"

/ol



a name="1"

-

a name="2"

-

a name="3"

-









Javascript（デフォルトで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 .

デモ