円滑なスクロールの終了位置

Question

私はスクロールして滑らかなアニメーションスクロールを表示します（CSS-Tricksのおかげ）！今これはすごくうまくいっていますが、ブラウザウィンドウの上部にスティックしてスクロールするときにセクションヘッダーの途中に入るNavがあります。私の人生は、似たような問題を抱えているかもしれない人を見つけることはできません。

<script type="text/javascript"> 
$(document).ready(function() { 
    function filterPath(string) { 
    return string 
    .replace(/^\//,'') 
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
    .replace(/\/$/,''); 
    } 
    var locationPath = filterPath(location.pathname); 
    var scrollElem = scrollableElement('html', 'body'); 

    $('a[href*=#]').each(function() { 
    var thisPath = filterPath(this.pathname) || locationPath; 
    if ( locationPath == thisPath 
    && (location.hostname == this.hostname || !this.hostname) 
    && this.hash.replace(/#/,'')) { 
     var $target = $(this.hash), target = this.hash; 
     if (target) { 
     var targetOffset = $target.offset().top; 
     $(this).click(function(event) { 
      event.preventDefault(); 
      $(scrollElem).animate({scrollTop: targetOffset}, 800, function() { 
      location.hash = target; 
      }); 
     }); 
     } 
    } 
    }); 

    // use the first element that is "scrollable" 
    function scrollableElement(els) { 
    for (var i = 0, argLength = arguments.length; i <argLength; i++) { 
     var el = arguments[i], 
      $scrollElement = $(el); 
     if ($scrollElement.scrollTop()> 0) { 
     return el; 
     } else { 
     $scrollElement.scrollTop(1); 
     var isScrollable = $scrollElement.scrollTop()> 0; 
     $scrollElement.scrollTop(0); 
     if (isScrollable) { 
      return el; 
     } 
     } 
    } 
    return []; 
    } 

});</script> 

だから私は、JSとjQueryを学習するプロセスにいるので、私はeveryonesの忍耐に感謝し、ご意見をお待ちしております：ここで

は、私は私のHTMLに貼り付けられていることをJSです。

事前に感謝します。

編集：ここに私のテストサイトがある：test

Answer 1

これは、スクロール項目

$.scrollTo(0, 500); 

の位置を制御するものである

http://flesler.blogspot.com/2008/09/jqueryscrollto-14-released.htmlからjquery.scrollTo.js のコピーを取得あなたが高い数字を設定した場合、0はページの上にかかります。 私の例では私がスクロールしたい5つのセクションがあります。必要に応じて変更してください。

私はヘッド部でこれを使用する：あなたはより多くの参照が必要な場合は、私が http://nick.boldison.com/websites/jquery/jquery-scroll-to-top-animation-scrollto-plugin/

を経由して、元のコードを見つけ

<ul class="pagination"> 

    <li><a href="" class="topOfPage">1</a></li> 
    <li><a href="" class="twoOfPage">2</a></li> 
    <li><a href="" class="threeOfPage">3</a></li> 
    <li><a href="" class="fourOfPage">4</a></li> 
    <li><a href="" class="fiveOfPage">5</a></li> 

</ul> 

：NAVを対応する本体部で

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> 


<script type="text/javascript" src="javascripts/jquery.scrollTo.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() 
{ 
// scroll to top 
$('a.topOfPage').click(function(){ 
$.scrollTo(0, 500); 
return false; 
}); 
// scroll to top 
$('a.twoOfPage').click(function(){ 
$.scrollTo(570, 500); 
return false; 
}); 
// scroll to top 
$('a.threeOfPage').click(function(){ 
$.scrollTo(1175, 500); 
return false; 
}); 
// scroll to top 
$('a.fourOfPage').click(function(){ 
$.scrollTo(1790, 500); 
return false; 
}); 
// scroll to top 
$('a.fiveOfPage').click(function(){ 
$.scrollTo(2385, 500); 
return false; 
}); 
}); 
</script> 

それがあなたを助けることを願っています

乾杯 V