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

发布于 2024-11-14 21:54:40 字数 496 浏览 2 评论 0原文

我意识到我在这里还很新，但我有一个静态图像（Google 地图，但尚未使用 Google API），其中我创建了热点，它将提取位于地图左侧表格中的位置数据。然而，当单击热点时，页面会向下滚动，以便地图顶部（图像地图）位于屏幕顶部，即使信息直接位于地图旁边。

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

流殇 2024-11-21 21:54:40

不要使用默认的浏览器行为（对于锚标记），只需阻止它，然后自己滚动该框即可。我可以看到您已经在使用 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()。从那里开始一切都是你的了。

是的，我喜欢图像地图，而且我还编写了一个插件，它可以对图像地图做很多事情。所以我是相当有偏见的。但令我惊讶的是，人们为了避免它们而遇到的麻烦（比如绝对定位锚链接、复杂的 CSS 等等），因为它们非常简单、易于使用、适用于所有浏览器，并且比手动定位所有热点强大得多。（如果没有图像图，或者没有一些疯狂的逻辑来自行确定鼠标的位置，无论如何，您都仅限于矩形区域！）。

Instead of using the default browser behavior (for anchor tags) just block it, and scroll the box yourself. I can see you are already using jQuery. So something like this ought to do the trick.

$('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);
});

It's kinda hard to test in the context of that page, but if you set up a fiddle with just that part of it I am sure this could be made to work right pretty easily.

(edit) - OP set up a fiddle with the problem, updated version here:

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

The code above has been updated to reflect what actually works. I also added the id "the_div" to the div surrounding the table of locations. Here's how it works:

1) get the part of the href after the # - the browser may add the full url.
2) find it, then get the next() element, because the invisible anchor tags will report that they have no location information
3) then get the position().top value which is the postion of that element relative to it's container
4) then scrollTop(..) to it

Contrary to @colinross's suggestion, there's nothing that's either non-extensible nor inflexible about imagemaps. Quite the opposite, they are the only way you can have irregularly shaped hotspots without going to a heck of a lot of trouble, and that gives you a lot of power. All you need to do to make them do whatever you want is bind your own mouseover and/or click events to the areas, and call e.preventDefault(). It's all yours from there.

Yes, I like image maps, and I also wrote a plugin that does a heck of a lot with them. So I am fairly biased. But I am surprised by the trouble people go to in order to avoid them (like absolutely positioning anchor links, complex css, and so on) when they're dead simple, easy to use, work with every browser under the sun, and are far more powerful than positioning all your hotspots by hand. (And without an imagemap, or some crazy logic to figure out where the mouse is on your own, you're limited to rectangular areas anyway!).

回复收藏 0 原文

掌心的温暖 2024-11-21 21:54:40

发生跳转是因为您使用的图像地图正在处理对位置 #DillonLocationsMap 的点击。

这与使用这样的页内锚点和 的其他链接的结果相同。到这里来。

说实话，我建议您不要使用图像映射，它们的可扩展性和可配置性都不是很好。

给鱼答案
将实际的

元素向上移动，例如移到 table#MainTable 元素之前。从技术上讲它仍然会跳跃，但你的标题应该仍然在视图中。

ps 页面布局表格让 pandas 哭泣;(

回复收藏 0 原文

梦回梦里 2024-11-21 21:54:40

当您点击链接时，与该城市相关的标签最终会滚动到。

随后，这将与“顶部”链接完全相同，在“顶部”链接中您将放置在页面顶部，然后页面底部的 返回顶部。它将尝试将尽可能靠近视口顶部（例如：http://mix26.com/demo/local_scroll/index.html）。

你可以尝试这样的事情（在这里找到）：

<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>

When you click on the link, your <a name="Nashville"></a> tag relating to said city end up scrolling to the top of your .

Subsequently, this will work the exact same way as with a "Top" link where you place an <a name="TOP"></a> at the top of your page and then a <a href="#TOP">Back to top</a> at the bottom of your page. It will try to put the <a name="Nashville"> as close to the top of the viewport as possible (example: http://mix26.com/demo/local_scroll/index.html).

You could try something like this (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>

回复收藏 0 原文

~没有更多了~