如何控制跳轉到頁面內的書籤

我試圖實現一個頁面的一定數量的div，其中每個都有一個書籤（名稱）。問題是，當我跳到其中一個書籤時，部分文本消失了，這是由設計引起的。我想知道是否有改變書籤行爲的方法，因此它不會將頁面的開始位置設置在頁面頂部，而是將其設置爲下面的一組像素。如何控制跳轉到頁面內的書籤

頁面可以在這裏訪問：不再在線，對不起。

當你轉到任何書籤（除了＃6，因爲文檔在那裏結束），就會發生這種行爲，就像在這裏：不再在線，抱歉。

這可以解決的CSS屬性或任何其他方式？（更新）我更喜歡這通過JavaScript解決方案，因爲我打算使用JavaScript來標籤他們，並保持書籤的情況下禁用JavaScript

來源

2011-11-27 canihavesomecoffee

問題是您的標題上的CSS - 'position：fixed;' – ManseUK

我知道該位置是固定的，但我希望標題，菜單和頁腳保持原位，無論您在文檔中的哪個位置滾動。 .. – canihavesomecoffee

@ codegrabber - 你可以簡單地把錨點放在你想要顯示的div上面。錨點和固定標題的以下標題元素之間留出足夠的空間。它會在每個部分之間創造更多的空間，但這可能不是問題。 – RobG

我得到了自己的答案，所以這基本上是引用。

要忽略由標題引起的100px偏移量，我爲每個div元素添加了一個100px的padding-top，然後我將鏈接更改爲div而不是我添加的元素。這個填充頂部基本上使文本出現在應該出現的位置，從而解決了我的問題。

來源

2011-11-28 08:30:34 canihavesomecoffee

我希望你使用了一個類，並添加了一些CSS - 否則如果你想改變頭的大小，你會有樂趣再次改變所有的代碼。 – ManseUK

是的，我添加了一個類和css :) – canihavesomecoffee

你可以用JavaScript使用scrollBy。將這個在load聽衆或onload處理程序：

if(window.location.hash.length > 1) { 
    window.scrollBy(0, -60); // Adjust to suit your needs. 
}

來源

2011-11-27 22:27:04 Ryan

這是一個很好的解決方案，當javascript被啓用，但有沒有辦法處理這個，如果javascript被禁用，例如？我正打算做一個JavaScript div轉換器，並打算在javascript被關閉的情況下使用書籤（可能應該提到那個） – canihavesomecoffee

window.onhashchange = window.onload = function() { 
    if(window.location.hash.length && window.scrollY > window.pageYOffset) { 
      window.scrollBy(0, -100); // Scroll up 100 pixels on hash change 
    }; 
};

來源

2011-11-27 22:36:38

警告 - window.scrollY和window.pageYOffset都不能在Internet Explorer上工作。 – Ryan

如何控制跳轉到頁面內的書籤

回答

相關問題