单击锚点和图像地图会导致页面不必要地移动

Question

我意识到我在这里仍然是个新手，但我有一个静态图像(Google map，但还没有使用Google API )，我在其中创建了热点，这些热点将拉出位于地图左侧的表中的位置数据。然而，当点击热点时，页面向下滚动，使得地图(图像地图)的顶部位于屏幕的顶部，即使信息就在地图的旁边。

我假设这是因为锚点正在试图在屏幕顶部加载。这是可以的，除了我的标题现在被推出了屏幕。有没有办法让页面在点击热点时不“移动”？

该页面可在此处查看：http://www.mydillonsupply.com/default.aspx?page=customer&file=customer/disupp/customerpages/locations_page.htm

Answer 1

而不是使用默认的浏览器行为(用于锚标签)，只要阻止它，并自己滚动框即可。我看得出你已经在使用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的建议相反，imagemaps没有不可扩展或不灵活的地方。恰恰相反，它们是唯一一种你可以拥有不规则形状的热点而不会遇到太多麻烦的方法，这给了你很大的动力。你所需要做的就是将你自己的鼠标悬停和/或点击事件绑定到这些区域，然后调用e.preventDefault()。从那以后都是你的了。

是的，我喜欢图像地图，我还写了一个plugin，用它们做了很多事情。所以我是相当有偏见的。但令我惊讶的是，人们为了避免它们而遇到的麻烦(比如绝对定位锚点链接、复杂的css等等)非常简单，易于使用，可以在任何浏览器上使用，而且比手动定位所有热点要强大得多。(如果没有图像地图，也没有一些疯狂的逻辑来自己找出鼠标在哪里，那么您只能使用矩形区域！)

Answer 2

之所以发生跳转，是因为您正在使用一个图像映射，该映射正在处理对位置#DillonLocationsMap的单击。

这与拥有一个页面内锚点(如<a name="over_here" /> )和一个<a href="#over_here">Go over here.</a>其他地方的链接是相同的结果

老实说，我建议你不要使用图像映射，它们既不是非常可扩展的，也不是可配置的。

给出鱼的答案将实际的<map>元素向上移动，例如在table#MainTable元素之前。它仍然会在技术上跳跃，但你的头应该仍然在视野中。

附注：页面布局的表格让熊猫哭了；

Answer 3

当你点击该链接时，你与该城市相关的<a name="Nashville"></a>标签会滚动到你的<!-- table containing locations -->的顶部。

随后，这将与“顶部”链接的工作方式完全相同，在该链接中，您在页面顶部放置<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>