javascript - 单击 anchor 和图像映射导致页面不必要地移动

Question

我意识到我在这里还是很陌生，但我有一个静态图像(谷歌地图，但尚未使用谷歌 API)，我在其中创建了热点，这些热点将提取位于左侧表格中的位置数据 map 。然而，当点击热点时，页面会向下滚动，这样 map (图像 map )的顶部就会出现在屏幕的顶部，即使信息就在 map 的旁边。

我假设这是因为 anchor 正在寻求在屏幕顶部加载。这没关系，只是我的标题现在被推出了屏幕。有没有办法让点击热点时页面不“移动”？

页面可以在这里看到:http://www.mydillonsupply.com/default.aspx?page=customer&file=customer/disupp/customerpages/locations_page.htm

Answer 1

与其使用默认的浏览器行为(对于 anchor 标记)，不如直接阻止它，然后自己滚动框。我可以看到您已经在使用 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);
});

在那个页面的上下文中测试有点困难，但如果你只用它的那一部分设置一个 fiddle ，我相信这可以很容易地工作。

(编辑)- OP 设置了一个问题，更新版本在这里:

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

上面的代码已经更新以反射(reflect)实际的工作原理。我还将 ID“the_div”添加到位置表周围的 div。这是它的工作原理:

1) 获取# 之后的 href 部分 - 浏览器可能会添加完整的 url。2)找到它，然后得到next()元素，因为不可见的 anchor 标签会报自己没有定位信息3) 然后获取 position().top 值，该值是该元素相对于其容器的位置4) 然后 scrollTop(..) 到它

---

与@colinross 的建议相反，图像映射没有任何不可扩展或不灵活的地方。恰恰相反，它们是您拥有不规则形状热点的唯一方式，而不会产生很多麻烦，这会给您带来很大的力量。要使它们为所欲为，您需要做的就是将您自己的鼠标悬停和/或单击事件绑定(bind)到这些区域，然后调用 e.preventDefault()。从那里一切都是你的。

是的，我喜欢图像映射，我还写了一个plugin这对他们有很大帮助。所以我相当有偏见。但是我很惊讶人们为了避免它们而遇到的麻烦(比如绝对定位 anchor 链接、复杂的 css 等等)，当它们非常简单、易于使用、可以在阳光下的每个浏览器上工作并且是比手动定位所有热点更强大。 (如果没有图像映射或一些疯狂的逻辑来自行判断鼠标的位置，无论如何您都只能使用矩形区域!)。