Question

我意识到我在这里仍然很新，但我有一个静态图像（谷歌地图但尚未使用谷歌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的建议相反，对图像地图没有任何不可扩展性或不灵活性。恰恰相反，它们是你可以拥有不规则形状的热点而不会遇到很多麻烦的唯一方法，这会给你很大的力量。您只需将自己的鼠标悬停和/或点击事件绑定到区域，然后调用e.preventDefault()即可。这是你的全部。

是的，我喜欢图像地图，而且我还写了一个plugin，它们对他们很有帮助。所以我很偏颇。但是我很惊讶人们为了避免它们而去的麻烦（比如绝对定位锚链，复杂的css等等），当它们简单易用，易于使用时，可以在阳光下使用每个浏览器，并且远比手动定位所有热点强大得多。（没有图像映射，或者一些疯狂的逻辑来确定鼠标在你自己的位置，你无论如何都只限于矩形区域！）。

Answer 2

跳跃正在发生，因为您正在使用处理点击的图像映射到#DillonLocationsMap的位置。

与<a name="over_here" />之类的页内锚点和<a href="#over_here">Go over here.</a>

的其他地方的链接相同

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

给鱼回答 将实际的<map>元素向上移动，例如在表＃MainTable元素之前。它仍然会在技术上跳跃，但你的标题仍应在视野中。

P.S。页面布局表使熊猫哭泣;（

Answer 3

当您点击该链接时，与该城市相关的<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>

单击一个锚点和图像映射导致页面不必要地移动

3 个答案: