点击图片的锚点和图片导致页面移动不必要

我意识到我在这里仍然很新，但我有一个静态图片（谷歌地图，但没有使用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

点击图片的锚点和图片导致页面移动不必要

回答

相关问题