錨鏈接錯誤地計算擴展布局

我正在一個頁面的網站上，其中各種內容位於不同的垂直擴展div內。當展開div時，任何已經打開的div都會自動關閉，並且我還希望頁面被滾動，以便特定內容自身位於瀏覽器頂部90px處。錨鏈接錯誤地計算擴展布局

通過爲每個div使用簡單的錨鏈接，大多數時候這種方式都很完美。然而，隨着擴展內容增加了網站的高度，錨點有時會錯誤地計算「停止點」，並且用戶滾動到錯誤的地方。特別是當從已經打開的一個展開不同的div時。我在一個other問題中讀到，在佈局中使用帶有不可預見的更改的錨鏈接時，有時會出現這種情況。有沒有人有一個想法如何解決這個問題？是否有可能「絕對」滾動新內容相對於視口頂部的位置？或者可以請求主播有點耐心，並在起飛之前等待所有內容加載？

此外，爲防止移動設備和小屏幕上的訪問者不得不加載全尺寸圖像，jquery會檢查訪問者的屏幕大小，並將正確圖像的相應html文件加載到#picswitend中。這可能是問題的一部分嗎？

下面是其中一個擴展div的代碼。這是我第一次嘗試jQuery，所以我猜它可能有點不確定，但它有效。

CSS：

.anchorlink { 
    position:absolute; 
    margin-top: -90px; 
    }

守則<head>：

<head> 
    <script> 
     open = ''; 
     active = ''; 
     $(document).ready(function() { 
     $('#closeinfo').hide(); 
     $('#closethis').hide(); 
     $('#faq').hide(); 
     $('#infomore').hide(); 
     $('#witsend').hide(); 
     }); 
    </script> 
    </head>

擴大的div的一個實例：

<div class="text"> 
    <a name="witsendlink" class="anchorlink"></a> 
    <a href="#witsendlink" id="witsend-show"> 
    <script> 
    $("#witsend-show").click(function() {  
     $('#' + active).hide(); 
     $('#' + active + '-show').show(); 
     $('#infomore').slideUp(200); 
     $('#witsend-show').hide(); 
     $('#witsend').show(); 
     active = "witsend"; 
    $('#closethis').show(); 
    $('#faq').hide(); 

    if($(this).width() <= 568){ 
     $("#picswitsend").load("witsendpicsm.html"); 
    } else { 
     $("#picswitsend").load("witsendpics.html"); 
    } 

    $('#witsendtitle').scrollToFixed({ 
     marginTop: $('#top').outerHeight() - 44, 
     limit: function() { 
      var limit = $('#lastwitsend').offset().top; 
      return limit; 
     }, 
      zIndex: 999, 
     });  
     }); 
    </script> 
    <div class="title"> 
    <p>Wits End Discography</p> 
    </div> 
    <div class="content"> 
    <p>Siste Sukk tapes & records is a small oslo-based independent label focusing on emo and hardcore, releasing most of their music on tape. When we made the cassette-cover for Wits End's latest release, we wanted to let an unconventional use of material play a major role in the design. 
    </p> 
    </div> 
    </a> 

    <div id="witsend"> 
    <div class="post"> 

    <div id="witsendtitle"> 
    <a href="#top" id="witsend-hide"> 
     <script> 
      $('#witsend-hide').click(function() { 
       $('#witsend').hide(); 
     $('#witsend-show').show(); 
     $('#closethis').toggle(); 
     active = ''; 
     }); 
     </script> 
     <p class="titletext"> 
      <p class="exit">&#10005;</p> Wits End Discography 
     </p> 
     </a> 
    </div> 

<div class="content open"> 
    <p> 
    <a href="http://www.sistesukk.com">Siste Sukk tapes & records</a> is a small oslo-based independent label focusing on emo and hardcore, releasing most of their music on tape. When we made the cassette-cover for Wits End's latest release, we wanted to let an unconventional use of material play a major role in the design. Basing the cover on a piece of folded newsprint and a and a small plastic bag, it pays respect to old school zine-culture while still keeping a sense of contemporariness and distinction in a scene heavily influenced by D.I.Y solutions. 

    Memento mori!<br><br>In collaboration with <a href="http://www.martinmartin.no">Martin Asbj&oslash;rnsen</a> 
     </p> 
    <p class="small">2012 &middot; Commissioned &middot; <a id="perma" href="http://www.jonasersland.net/index.php?section=witsend#witsend">Permalink <span id="flag"> &#9873;</span></a> 
     </p> 
    </div> 
    </div>   
    <div id="picswitsend"> 
    </div>     
    </div> 
    </div>

我，如果有人會照顧給予真的很感謝關於這個的一些想法，如果我包含太少或不相關的信息，我很抱歉。請隨時詢問是否有任何問題，我會很高興回答！

有一個絕對燦爛的一天。

編輯：這裏是行動的網站：http://www.jonasersland.net

來源

2013-01-11 Jonas

您可以使用jQuery的方法scrollTop的以「絕對」滾動到90像素以下瀏覽器的頂部 - 你可以激活它啓動，因此簡化了在： http://api.jquery.com/scrollTop/。你所要做的將是這樣的：

$("#linkTopAnchor").click(function() { 
    $(this).blur(); 
    $("html, body").animate({scrollTop: "90px"}, "fast"); 
    return false; 
});

我使用$(this).blur();因爲某些移動設備會自動滾動到任何當前突出 - 所以頁面將滾動到您想要的位置，然後跳回如果您沒有手動取消選擇，則啓動事件的按鈕。我在那裏有return false;以防止URL改變爲散列標籤。在你的情況下，你可能希望網址實際改變，所以你可以簡單地刪除它。

來源

2013-01-11 19:17:22 Jack

非常感謝您的建議！我一直認爲'scrollTop'只與整個文檔本身有關，而不是瀏覽器。無論以前的位置如何，此腳本是否會使被單擊的元素自動將自身定位在瀏覽器頂部以下90px？ – Jonas

這個腳本不會改變任何元素的位置，它會導致瀏覽器本身滾動 - 就像你自己點擊向上/向下箭頭一樣。瀏覽器的以前的位置可以根據需要進行處理（例如，您可以在不傳入任何參數的情況下使用scrollTop來查找頁面需要滾動多少以使任何元素的頂部可見），但腳本我給你的並不是尋找瀏覽器以前的位置。閱讀scrollTop文檔 - 是一個很酷的功能，你可以做很多事情。 – Jack

謝謝，這就是我的意思，我只是表達了自己有點尷尬。肯定會閱讀scrollTop文檔。非常感謝您的幫助！ – Jonas

錨鏈接錯誤地計算擴展布局

回答

相關問題