从图像映射中的 link 在 div 内平滑滚动

Question

我正在尝试从图像映射中获得 div 中的平滑滚动功能。虽然我可以从 link 获得平滑的滚动效果，但在单击图像地图中的某个区域时无法使其正常工作。我发现的有限信息似乎表明，无论出于何种原因，都无法做到这一点。我想这不是真的，但无论如何我都想要一个明确的答案。

这是 fiddle： https://jsfiddle.net/droo46/attd75f5/

HTML

<div id="thisdiv">
    <ul>
        <li id="top">planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li>planet</li>
        <li id="star">sun</li>
    </ul>
</div>

<img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="#star">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
      <a href="#top">To the top</a>

Javascript

$(function () {
    $('a').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('#thisdiv').animate({
                    scrollTop: $('#thisdiv').scrollTop() + target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

Answer 1

我编辑了你的 jsfiddle 并添加了这个

$("area[shape='rect']").click(function(){
  $('#thisdiv').animate({scrollTop: $("#thisdiv").prop("scrollHeight")}, 1000);
});

我使用简单的 jQuery 和“属性等于选择器”，但您可能应该给地区，例如

<map name="planetmap">
  <area id="sun" shape="rect" coords="0,0,82,126" alt="Sun" href="#star">
  <area id="mercury" shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

而 jQuery 点击事件将是

$("#sun").click(function(){
  $('#thisdiv').animate({scrollTop: $("#thisdiv").prop("scrollHeight")}, 1000);
});

这是 fiddle：https://jsfiddle.net/attd75f5/4/

请告诉我这是否是您要找的，或者它是否有任何帮助:)

来源：

https://api.jquery.com/attribute-equals-selector/

从图像映射中的 link 在 div 内平滑滚动

Smooth scrolling within a div from a link in an image map

html

javascript

jquery

smooth

imagemap