如何在頂部使用具有固定元素的哈希來平滑滾動瀏覽器窗口？

Question

我已經在那個包含像這樣的內容的其餘鏈接achors頂部有一個fixed導航欄網站：

<header style="position:fixed"> 
    <a href="#hello">Scroll to Headline Hello</a> 
</header> 
<article> 
    <h1><a name="hello" id="hello">Hello</a><h1> 
</article> 

當用戶點擊該鏈接後，相應的標題被遮蔽標題，因爲瀏覽器將它直接放置在視口的開頭。我試圖使用這裏描述的csstricks的jQuery腳本來平滑地滾動到targetOffset + heightOfHeader，但這只是讓內容隨機跳轉。

下面是腳本：

$(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}, 400, 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 []; 
    } 

}); 

任何幫助，將不勝感激。

Answer 1

我看到你用jquery標記問題。我喜歡使用scrollTo插件來完成此操作。

http://flesler.blogspot.com/2007/10/jqueryscrollto.html