スクロール時にナビゲーションをアクティブに設定するページスクローラーのこの例を使用しています。
お役に立てれば幸いです。
コンソールにこのエラーが表示されます。
TypeError: $(...).offset(...) は未定義です [このエラーで中断]
contentTop.push( $( $(this).attr('href') ).offset().top );
HTML
<nav id="nav">
<ul>
<li><a href="#1">B</a></li>
<li><a href="#2">B</a></li>
<li><a href="#3">C</a></li>
<li><a href="#4">D</a></li>
<li><a href="#5">E</a></li>
<li><a href="#6">F</a></li>
</ul>
</nav>
JS
smoothScroll: function() {
var topRange = 200, // measure from the top of the viewport to X pixels down
edgeMargin = 20, // margin above the top or margin from the end of the page
animationTime = 1200, // time in milliseconds
contentTop = [];
// Stop animated scroll if the user does something
$('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(e){
if ( e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel' ){
$('html,body').stop();
}
})
// Set up content an array of locations
$('#nav').find('a').each(function(){
contentTop.push( $( $(this).attr('href') ).offset().top );
})
// Animate menu scroll to content
$('#nav').find('a').click(function(){
var sel = this,
newTop = Math.min( contentTop[ $('#nav a').index( $(this) ) ], $(document).height() - $(window).height() ); // get content top or top position if at the document bottom
$('html,body').stop().animate({ 'scrollTop' : newTop }, animationTime, function(){
window.location.hash = $(sel).attr('href');
});
return false;
})
// adjust side menu
$(window).scroll(function(){
var winTop = $(window).scrollTop(),
bodyHt = $(document).height(),
vpHt = $(window).height() + edgeMargin; // viewport height + margin
$.each( contentTop, function(i,loc){
if ( ( loc > winTop - edgeMargin && ( loc < winTop + topRange || ( winTop + vpHt ) >= bodyHt ) ) ){
$('#nav li a')
.removeClass('selected')
.eq(i).addClass('selected');
}
})
})
},