css/js實現點擊錨點讓定位位移頂部

在stackoverflow看到的一個方法是在主體內容前加一個暗錨：

代碼如下	複製代碼
<a class="target-fix" name="a-<?php $a->id(); ?>"></a> <artivle>主體內容...</article>

將錨點進行位移，並隱藏佔位：

代碼如下	複製代碼
.target-fix {     position: relative;     top: -44px; // 位移值     display: block;     height: 0;     overflow: hidden; }

這個也是最直接的方法。

我採用的是相對簡潔的方法：對於現代瀏覽器如果支援css的:target聲明,可以這麼設定:

代碼如下	複製代碼
article.a-post:target{     padding-top:44px; }

對於IE這等落後的瀏覽器是不支援的.另外可以使用js去調整scroll,比如使用jQuery:

代碼如下	複製代碼
$(function(){   if(location.hash){      var target = $(location.hash);      if(target.length==1){          var top = target.offset().top-44;          if(top > 0){              $('html,body').animate({scrollTop:top}, 1000);          }      }   } });

可以使用jquery-hashchange:https://github.com/cowboy/jquery-hash...

綁定window.onhashchange事件:

代碼如下	複製代碼
$(function(){         /* 綁定事件*/         $(window).hashchange(function(){             var target = $(location.hash);             if(target.length==1){                  var top = target.offset().top-44;                  if(top > 0){                      $('html,body').animate({scrollTop:top}, 1000);                  }              }         });         /* 觸發事件 */         $(window).hashchange(); });

關於window.onhashchange事件:https://developer.mozilla.org/en-US/d...