Javascript 从图像映射中的链接在div内平滑滚动

我试图从图像映射中获得div中的平滑滚动功能。虽然我可以从链接中获得平滑的滚动，但当单击图像地图中的某个区域时，我无法使其工作。我所发现的有限信息似乎表明，无论出于何种原因，这都无法实现。我想这不是真的，但我希望得到一个明确的答案

这是小提琴：

HTML

---

我编辑了您的JSFIDLE，并添加了以下内容

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

我使用了带有“属性等于选择器”的simplejQuery，但您可能应该为这些区域提供一些id，如

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

这是小提琴：

请让我知道这是否是您想要的，或者它是否有任何帮助：）

资料来源：

---

那把小提琴似乎不起作用。点击sun会将列表平滑地滚动到底部标签。很抱歉，我已经编辑了我的答案，现在它确实会滚动到列表的底部。现在检查新的JSFIDLE，并让我知道

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

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

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