從圖像地圖中的鏈接在div內平滑滾動

Question

我試圖從圖像地圖中獲得平滑滾動功能。雖然我可以從鏈接平滑滾動，但點擊圖像地圖中的某個區域後無法使其正常工作。我發現的有限信息似乎表明，無論出於何種原因，這是不可能完成的。我想這不是真的，但我希望得到明確的答案。

這裏的小提琴： 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與「屬性等於選擇」，但也許你應該給一些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> 

而jQuery的點擊事件，

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

這裏的小提琴：https://jsfiddle.net/attd75f5/4/

請讓我知道，如果這就是你要找的，或者如果它以任何方式幫助:)

來源：

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