如何片段标识符取决于

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，但每一个浏览器不支持它。

如果任何人有更好的解决方案，我会很感激，因为我一直在考虑它很长一段时间。