如何片段標識符取決於

Question

頁面

我想在URL更新的片段標識符作爲用戶滾動，使其在屏幕頂部的元素相匹配的滾動位置進行設置。

有沒有辦法做到這一點？

Answer 1

我想這是你想要的東西：http://fiddle.jshell.net/hainawa/u5e2s/show/light/

HTML：

<div id="section-1" class="section">section-1 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div> 
<div id="section-2" class="section">section-2 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div> 
<div id="section-3" class="section">section-3 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div> 
<div id="section-4" class="section">section-4 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div> 

的JavaScript（依賴於jQuery的）：

$(function() { 
    var $secitions = $(".section"), 
     topArrays = {}; 

    $secitions.each(function(i, ele) { 
     var $section = $secitions.eq(i), 
      secTop = $section.offset().top; 
     topArrays[secTop] = $section.attr("id"); 
    }); 

    $(document,window).scroll(function(e) { 
     var $ele = $(e.currentTarget), 
      currentTop = $ele.scrollTop(), 
      currentHash, arrayHash, topDiff; 

     for(var i in topArrays) { 
      arrayHash = topArrays[i]; 
      topDiff = currentTop - i; 
      currentHash = document.location.hash; 
      //It's impossable to scroll to the section without any offset 
      if(topDiff > 0 && topDiff < 100 && currentHash != arrayHash) { 
       document.location.hash = arrayHash; 
      } 
     } 
    }); 
}); 

但這裏也存在一些問題：

1. 如果你是usin g圖像延遲加載，它不會工作;
2. 代碼的性能不是很高;
3. history.pushState是更好然後分配值的location.hash，但每一個瀏覽器不支持它。

如果任何人有更好的解決方案，我會很感激，因爲我一直在考慮它很長一段時間。