從另一頁滾動到特定div減X距離

我正在使用以下腳本來執行我的標題中描述的操作。從另一頁滾動到特定div減X距離

<script type="text/javascript"> 
       var jump=function(e) 
     { 
     if (e){ 
      e.preventDefault(); 
      var target = $(this).attr("href"); 
     }else{ 
      var target = location.hash; 
     } 

     $('html,body').animate(
     { 
      scrollTop: $(target).offset().top 
     },1000,function() 
     { 
      location.hash = target; 
     }); 

     } 

     $('html, body').hide(); 

     $(document).ready(function() 
     { 
      $('a[href^=#]').bind("click", jump); 

      if (location.hash){ 
       setTimeout(function(){ 
        $('html, body').scrollTop(0).show(); 
        jump(); 
       }, 0); 
      }else{ 
       $('html, body').show(); 
      } 
     }); 
     </script>

它工作得很好。但是，我有一個固定的頭部，它覆蓋了div滾動到一次。我想從希望的滾動目標減去80px。我如何修改代碼來做到這一點？

這裏有一個現場版本。

robertkoh.net/Electrotemp/index.html

點擊 '管道式真空系統'。它會將您帶到產品和服務頁面並滾動到相應的部分。正如你所看到的，固定頭文件涵蓋了它的一部分。

來源

2015-05-20 rjtkoh

解決方案1：減去80個像素，並且沒有重新設置location.hash

你只需要改變此塊：

$('html,body').animate({ 
    scrollTop: $(target).offset().top 
}, 1000, function() { 
    location.hash = target; 
});

爲以下代碼：

$('html,body').animate({ 
    scrollTop: $(target).offset().top - 80 
}, 1000);

增加的- 80將減去那80像素，所以滾動會提前停止。
刪除location.hash = target;（在滾動動畫完成後調用）修復了跳回舊位置的問題。此代碼重新設置導致瀏覽器再次滾動的哈希標記。但請注意，點擊站點內部散列鏈接不會再更新URL欄中的散列。

解決方案2：將你的頁面內容到一個單獨的滾動<div>

創建一個新的<div id="container">是後開始和</body>之前結束。
將行$('html,body').animate({更改爲$('#container').animate({。
從.titlebar刪除margin-top: 70px;。

添加這個CSS的#container元素：

#container { 
    position: fixed; 
    top: 70px; 
    bottom: 0; 
    left: 0; 
    overflow: auto; /* enable scrolling */ 
}

這樣做，這樣有一定的優勢：

您不必添加- 80。
您不必刪除location.hash = target;。
未啓用JavaScript的瀏覽器跳轉到正確的位置。

來源

2015-05-20 11:46:05 Alex

試過了，不起作用。它似乎是這樣做的，就像它減去了80，但然後跳回到0。我覺得它與下面的所有代碼有關，它重置了一些東西？ – rjtkoh

沒有現場實例很難猜測。但是你可以嘗試從這行刪除'.scrollTop（0）'部分：'$（'html，body'）。scrollTop（0）.show（）;'。 – Alex

感謝您的嘗試。我也嘗試過，但仍然沒有成功。這是一個真人版。 http://www.robertkoh.net/Electrotemp/index.html 點擊'涵道真空系統'。它會將您帶到產品和服務頁面並滾動到相應的部分。正如你所看到的，固定頭文件涵蓋了它的一部分。 – rjtkoh

從另一頁滾動到特定div減X距離

回答

相關問題