Search code examples
javascriptjqueryhtmlimagemapsmoothing

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

I'm trying to get smooth scrolling functionality in a div from an image map. While I can get smooth scrolling from a link, I cannot get it it to work when clicking on an area in an image map. The limited information I've found seems to say that for whatever reason, this cannot be done. I'd like to think that's not true, but I would like a definitive answer either way.

Here's the 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;
            }
        }
    });
});
Solution

  • I've edited your jsfiddle and I've added this

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

    I used simple jQuery with the "attribute equals selector", but probably you should give some id to the areas, like

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

    And the jQuery click event would be

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

    Here's the fiddle: https://jsfiddle.net/attd75f5/4/

    Please let me know if that's what you were looking for, or if it helps in any way :)

    Source: