點擊圖片的錨點和圖片導致頁面移動不必要

我意識到我在這裏仍然很新，但我有一個靜態圖片（谷歌地圖，但沒有使用Google API），其中我創建了熱點將居住在地圖左側的表中的位置數據拉起來。然而，當熱點被點擊時，頁面向下滾動，使得地圖的頂部（圖像地圖）位於屏幕的頂部，即使信息直接在地圖旁邊。點擊圖片的錨點和圖片導致頁面移動不必要

我假設這是因爲錨尋求加載在屏幕的頂部。這將是好的，除了我的標題現在被推出屏幕。點擊熱點時，頁面有沒有「移動」的方法？

頁可以在這裏看到：http://www.mydillonsupply.com/default.aspx?page=customer&file=customer/disupp/customerpages/locations_page.htm

感謝您的幫助，您是給這個NUBE。

來源

2011-06-09 rlphilli

不使用默認的瀏覽器行爲（錨標籤）只是阻止它，然後滾動自己的箱子。我可以看到你已經在使用jQuery。所以像這樣的事情應該做的伎倆。

$('area').bind('click', function(e) { 
    e.preventDefault(); 
    // the div in question has nothing uniquely identifiable as it is now, 
    // assign it a unqie class or id so you can select it 
    var findAnchor=this.href.split('#')[1]; 
    $('#the_div').scrollTop($('a[name="' + findAnchor+'"]').next().position().top); 
});

這是有點難以在該頁面的上下文來進行測試，但如果你設置了一個撥弄它只是一部分，我相信這可以作出正確的很輕鬆地工作。

（編輯） - OP建立與該問題的小提琴，在這裏更新版本：

http://jsfiddle.net/H3Mz6/9/

上面的代碼已被更新，以反映實際工作。我還將ID「the_div」添加到圍繞位置表的div中。下面是它如何工作的：

1）＃後得到HREF的一部分 - 該瀏覽器可以添加完整的URL。 2）找到它，然後拿到next()元素，因爲看不見的錨標籤會報告說，他們沒有位置，然後信息 3）獲得position().top值，它是相對於它該元素的現在的位置是容器 4）然後scrollTop(..)到它

出乎@ colinross的建議，沒有任何東西是要麼不擴展也不呆板關於圖像映射。恰恰相反，他們是唯一可以讓你形成不規則形狀的熱點的方法，而且不會遇到很多麻煩，這給了你很大的力量。所有你需要做的，使他們做你想做的事情是綁定你自己的鼠標懸停和/或點擊事件的地區，並致電e.preventDefault()。這都是你的。

是的，我喜歡像地圖，我也寫了plugin，做了很多跟他們的挫折感。所以我相當有偏見。但是，當人們爲了避免它們而陷入困境時（例如絕對定位錨鏈接，複雜的CSS等），當他們死了簡單，易於使用，在陽光下與每個瀏覽器一起工作並且手工定位所有熱點的功能要強大得多。（沒有圖像映射，或者一些瘋狂的邏輯來確定鼠標在你自己的位置，反正你只限於矩形區域！）。

來源

2011-06-09 22:21:53

凹凸！如果我知道如何做到這一點，我會說，而不是肯定使用jQuery :)乾杯，Jamietre！ – joshmax 2011-06-10 03:38:07

好的，Jamietre，我想我明白你想要做什麼。我對jQuery仍然很陌生，但我一直在閱讀關於你在這裏展示的函數的具體內容。但我的經驗不足將會顯示在這裏：1）我是否需要爲我的所有位置（＃納什維爾，＃貝茨維爾等）複製最後一行？ 2）我用什麼來取代'a＃'？ – rlphilli 2011-06-10 12:49:18

您不應該改變任何內容 - 這會將錨點目標從被點擊區域的'href'屬性中拉出。此代碼將事件綁定到地圖上的所有區域，並滾動div，以便與點擊的匹配的錨點位於頂部。就像我說的，雖然如果它能正確運行*就像是幸運的，但是如果你可以將imagemap和div放到jsfiddle中，那麼測試並給你更多的指導會更容易。 – 2011-06-10 13:04:11

跳轉發生是因爲您正在使用正在處理單擊位置#DillonLocationsMap的圖像映射。

這是相同的結果爲具有在頁面的錨狀<a name="over_here" />和<a href="#over_here">Go over here.</a>

其他地方的鏈接，我建議你不要使用影像地圖是誠實的，他們都不是很可擴展的，也可配置。

給魚回答表＃MainTable元素之前移動實際<map>元素最多，爲實例。它仍然會在技術上跳躍，但你的標題仍應該在視圖中。

p.s.對頁面佈局表讓熊貓哭;（

來源

2011-06-09 21:31:00 colinross

當你點擊鏈接，你與<a name="Nashville"></a>標籤說城市最終會滾動到你的頂部

隨後，這將工作完全一樣的。與「頂部」鏈接一樣，您可以在頁面頂部放置<a name="TOP"></a>，然後在頁面底部放置<a href="#TOP">Back to top</a>，它會嘗試將<a name="Nashville">儘可能靠近視口頂部（例如： http://mix26.com/demo/local_scroll/index.html）。

你可以試試像這樣（found here）：

<html> 
<head> 
<title>Document Title</title> 

<script type="text/javascript" language="javaScript"> 
<!-- 
    function go_anchor(n){ 
    document.getElementById("div1").scrollTop = document.getElementById(n).offsetTop 
    } 
// --> 
</script> 
</head> 

<body> 
<a href="#null" onclick="go_anchor('sp1')">To anchor 1</a><br /> 
<a href="#null" onclick="go_anchor('sp2')">To anchor 2</a><br /> 
<a href="#null" onclick="go_anchor('sp3')">To anchor 3</a><br /> 
<a href="#null" onclick="go_anchor('sp4')">To anchor 4</a><br /> 

<div id="div1" style="position:absolute; left:30; top:100; width:330; height:200; clip:rect(0,330,200,0); overflow:auto; padding:5;border:2px solid black"> 
<p><a href="#null" onclick="go_anchor('sp1')">To anchor 1</a></p> 
<p>Dummy Text 2</p> 
<p>Dummy Text 3</p> 
<p>Dummy Text 4</p> 
<p>Dummy Text 5</p> 
<p>Dummy Text 6</p> 
<p>Dummy Text 7</p> 

<p><span id="sp1">Anchor 1</span></p> 

<p>Dummy Text 9</p> 
<p>Dummy Text 10</p> 
<p>Dummy Text 11</p> 
<p>Dummy Text 12</p> 
<br/><br/><br/><br/><br/> 

<span id="sp2">Anchor 2</span> 

<br/><br/><br/><br/><br/> 

<span id="sp3">Anchor 3</span> 

<br/><br/><br/><br/><br/> 

<span id="sp4">Anchor 4</span> 

<br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/> 
The End 
</div> 

</body> 
</html>

來源

2011-06-09 21:37:12 joshmax

點擊圖片的錨點和圖片導致頁面移動不必要

回答

相關問題