固定鏈接到頁面的某個位置

我有一個鏈接到另一個頁面的固定鏈接。當它被點擊時，默認它會進入下一頁的頂部。我想把它帶到頁面的某個位置。我如何做到這一點（無論是與jQuery幻燈片效果或正常的HTML）？固定鏈接到頁面的某個位置

例如，當.sample a被點擊時，我想讓它帶你到鏈接頁面的某個位置。

2009-12-06 JCHASE11

注意 - 由於我的情況的性質，所有上述解決方案將不起作用。因爲我正在使用這個jQuery內容滑塊，它不能正常工作。這是很難解釋，所以請訪問維生素jdesign.com並點擊服務按鈕。它被散列到目標頁面上的特定內容滑塊框架，但該窗口在點擊時未正確定位。任何其他選項允許您指定目標頁面的y座標？ – JCHASE11 2009-12-06 03:46:28

例如，我沒有在http://vitaminjdesign.com/about.html#about上看到目標錨鏈接，因此它位於頂部。 – cdonner 2009-12-06 04:43:40

好的，所以這個答案是非常具體到你的問題。

原因沒有其他解決方案的工作是你的div元素將與頁面加載相匹配隱藏。

要證明這一點，請點擊您的主頁上的鏈接，並看到它不是工作。然後將散列從#whatever更改爲#bgaboutbody，您將看到它正常工作。

所以，使用這樣的東西將使它爲你工作。基本上，如果有散列，它會動畫到正確的位置。

它始終是更好地確保您的內容將不加載：在你的頁面的最下方（右</body>標籤上面）

window.setTimeout(function(){ 
    if(window.location.hash){ 
     var $target = $(window.location.hash).closest("#bgaboutbody"); 
     if($target.length) 
      $('html, body').animate({scrollTop: $target.offset().top}, 1000); 
    } 
}, 100);

瞭解如何使用回退將這個在腳本塊像這樣的銷售網站上的JavaScript。（在網絡應用程序中，我認爲這是一個不同的討論）。我建議使用我給你的解決方案this question，在此頁面的<head>中將js類添加到html元素。然後範圍你的CSS是這樣的：

.js #contact, .js #about, etc { display:none }

所以它只會被隱藏，如果JS存在。此外，由於這個解決方案也使用JavaScript，它的重要性在於JS被禁用時它們是可見的，所以它仍然可行。

來源

2009-12-06 04:52:15

再次感謝dcneiner。我只是試圖把它放在包含錨點的索引頁面上。它似乎沒有工作。內容加載器似乎並沒有首先選擇任何內容。你有這個運氣嗎？ – JCHASE11 2009-12-06 05:42:20

啊，我的不好。我的代碼中有一個錯誤:(我在這裏更新了代碼，但也嘗試http://s3.amazonaws.com/pixelgraphics/stackoverflow/1851141/vjd_sub.html#contact或http://s3.amazonaws.com/ pixelgraphics/stackoverflow/1851141/vjd_sub.html＃networks。此外，在這些鏈接上，我將'100 ms延遲改爲'300' ms。 – 2009-12-06 06:17:53

輝煌！那就行了。？ – JCHASE11 2009-12-06 16:46:58

你可以用簡單的HTML使用哈希URL「＃」來做到這一點。例如：

<a id="somelocation"></a>

可以自動滾動通過點擊像一個鏈接進入查看：

<a href="#somelocation">Go to somelocation on this page</a>

這可以鏈接到其他網頁來完成了。

<a href="someotherpage.html#somelocation">Go to somelocation on someotherpage</a>

來源

2009-12-06 03:11:26 Joel

你必須做的第一件事是到目標頁面某處定義一個錨：

<a name="myAnchor" />

假設目標頁面被稱爲「website.html」。然後，您必須將錨追加到鏈接：

<a href="website.html#myAnchor">Click here</a>

最良好的祝願，
費邊

來源

2009-12-06 03:11:38 halfdan

一眼就認出你是Jon Skeet。 – nickf 2009-12-06 04:59:59

使用name attribute。

來源

2009-12-06 03:12:14 cdonner

使用這樣的錨目標文檔中：

<a name="anchor1"></a>

或

<a id="anchor1"></a>

和源文件中：

<a href="http://www.example.com/some/page.html#anchor1">Go to anchor 1</a>

或同一文檔中：

<a href="#anchor1">Go to anchor 1</a>

來源

2009-12-06 03:12:30 cletus

這是我的解決方案。

 $('.container').on('click', function(e){ 
      var hash  = $(this).find('a').attr('href'), 
       target  = $('html').find('p'+hash), 
       location = target.offset().top; 

      $('html, body').stop().animate({scrollTop: location}, 1000); 

      e.preventDefault(); 
     });

HTML會是這樣：

<div class="container"> 
    <a href="hash">click me</a> 
</div> 

<p id="hash"></p>

所以在錨點擊時會滾動到文檔中的相應錨。

來源

2012-09-03 04:34:57 Subash

我正在尋找更好的方法來做到這一點，但我找不到一個。我的解決方案是在目標點處創建一個零寬度錨點，通過「position：relative」將其拉出正常流程，並確保內容框的高度與強制將下列元素向下放置頁：

<a name="target" style="position: relative; padding-top: 200px">&#x200B;</a>

拉出來正常流動的不斷填充成爲網頁的一部分，但計算偏移所有的瀏覽器，當我進行定位時，測試方面，。當然，這隻適用於視口頂部的固定偏移量。它可以工作，但感覺很糟糕。

來源

2013-01-17 19:27:37 Rob

固定鏈接到頁面的某個位置

回答

相關問題