如何使用固定導航欄重定向到頁面並向下滾動到DIV

我將用戶從頁面重定向到我網站上的另一個頁面。我重定向使用以下URL格式：如何使用固定導航欄重定向到頁面並向下滾動到DIV

locations.php ID = 1＃resultsbox_10

上面將用戶對DIV 'resultsbox_10'。我最近對導航欄進行了更改，以便在向下滾動時保持網頁的頂部100像素。我使用了JQuery Waypoint插件。由於我的頁面的第一個100px現在被導航欄覆蓋，因此用戶重定向到的DIV的一部分已被阻止。有什麼方法可以讓我通過向URL添加內容將用戶帶到DIV的'resultsbox_10'加上頂部100px？

來源

2013-06-12 Lloyd Banks

您是否可以不添加填充到resultsbox_10的頂部並將內容向下推？ – Liam

@Liam頁面上有多個結果框。它們以列表形式呈現。如果向每個結果框添加填充，則通常在查看頁面時會有很多額外空間 –

我想出了一個JavaScript回答這個困境喝佳得樂今晚整個事情的經過。我不通過URL傳遞DIV ID，而是傳遞一個GET變量。

locations.php?id=1&link_review_id=66

在我的目標頁面（「locations.php」）上，我獲取了GET值。

$link_review_id = $_GET["link_review_id"];

然後在JavaScript中使用它。

$(document).ready(function(){ 
     var link_review_id = "<?php echo $link_review_id; ?>"; 
     if(link_review_id != "" && link_review_id != null){ 
      var scroll_object = $("#resultsbox_" + link_review_id).offset(); 
      var scroll_height = scroll_object.top - 100; 
      window.scrollBy(0, scroll_height); 
     } 
});

在沒有設置GET值的正常頁面加載時，自動向下滾動將被忽略。如果設置了GET值，我將滾動到所討論的DIV的長度，並取其100px。

來源

2013-08-14 06:47:33

你可以嘗試將邊緣+填充其相互抵消：

.resultsbox { 
    margin-top: -100px; 
    padding-top: 100px; 
}

來源

2013-06-12 20:35:08 user2466466

這會使結果框在列表上相互重疊 –

如何使用固定導航欄重定向到頁面並向下滾動到DIV

回答

相關問題