Question

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;
            }
        }
    });
});

Answer 1

我已经编辑了你的jsfiddle，我已经添加了这个

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

我使用简单的 jQuery 和＆＃34; 属性等于选择器＆＃34;，但可能你应该给这些区域一些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/

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

1 个答案: