Jquery 所有区域的引导数据切换和滚动视图

我有一个包含多个区域的图像地图，每个区域都有一个href ID。单击图像上的某个区域将在图像下方折叠一个div，然后再次单击同一区域将关闭折叠的div

我试图让div在单击时滚动到视图中，我用

    $('#A00Info').on('shown.bs.collapse', function () {
        document.getElementById('A00Info').scrollIntoView({block: "end", behavior: "smooth"});

现在，这在一定程度上起作用了。当我点击#A00Info区域时，它会将其div折叠到图像下方并滚动到视图中

我的问题是，我有4个图像映射，有许多区域，我不想复制和粘贴每个div的脚本

如何编写一个函数/脚本，查找已单击的区域，然后查找相应的div，将其折叠并滚动到视图中

我做了两次尝试

               $('area[href*="#"]:not([href="#"]').on('shown.bs.collapse', function () {
               var target = $(this.getAttribute('href'));
               target.scrollIntoView();

           });

及

但我没有成功。我是jQuery和JavaScript的新手，也是一名新手程序员。如果有任何帮助或指导，我都会很有帮助

编辑：这是我的HTML

包含地图及其区域的窗格

...<div id="groundfloor" class="tab-pane fade">
                            <div class="text-center">
                                <img src="FloorPlanGround.png" alt="" usemap="#groundfloormap">
                                    <map name="groundfloormap" id="groundfloormap">
                                        <area data-toggle="collapse" alt="" title="" href="#A00Info" shape="rect" coords="220,203,344,322" />
                                        <area data-toggle="collapse" alt="" title="" href="#A07Info" shape="rect" coords="288,129,343,152" />...

。。。
...

以及单击某个区域时打开的div

...<div class="container-fluid">
                                <div id="A00Info" class="text-center hidden">
                                    <div class="panel-collapse collapse in">
                                        <div class="row1 col-lg-12 text-left" style="padding-left: 0px;">
                                            <h2 style="text-decoration: underline; margin-bottom: 1px;">A00</h2>...

。。。
A00。。。

在本例中，您可以试试这个<代码>链接是以

链接

开头的所有

a

标记。因此，您可以将其用作

id

get和

href

并滚动

因此，您的

id

可以是

link#A00Info

或

link#A00Details

。它将在两个

id

或者最好也提供HTML代码

      $('[id^="link_"]').on('shown.bs.collapse', function(event) {
        var dataValue = $(this).attr('href');
        $(dataValue).scrollIntoView();
      });

---

如果有人和我在同一条船上，我用以下代码实现了我想要的：

        $(document).ready(function(){
            $("div:hidden").on({
                'shown.bs.collapse': function(){
                    $('html, body').animate({
                        scrollTop: $(this).offset().top - 20
                    }, 'slow'); 
                    event.stopImmediatePropagation();
                },
                'hidden.bs.collapse': function(){
                    $("html, body").animate({ scrollTop: 0 }, "slow");
                    event.stopImmediatePropagation();
                }  
            });
        });

---

我用animate（{scrollTop}）替换了scrollIntoView，对它进行了一点调整，我得到了比预期更好的行为（页面平滑滚动到单击打开的div中，而不是直接跳入视图）。此外，我还了解了一些jQuery选择器（在本例中必须选择div:hidden，这样它才能工作，而不是查找区域[href=“#”]）

你有JSFIDLE中的代码吗？我没有，对不起。我试过拉小提琴，但没有成功。我试过，但没有成功。我应该在哪里添加

链接？我已将HTML添加到Skype ID“Indian.pie”上的原始postText中。我会修好的。在我的帖子里修好了，就在下面——再次感谢你的帮助
        $(document).ready(function(){
            $("div:hidden").on({
                'shown.bs.collapse': function(){
                    $('html, body').animate({
                        scrollTop: $(this).offset().top - 20
                    }, 'slow'); 
                    event.stopImmediatePropagation();
                },
                'hidden.bs.collapse': function(){
                    $("html, body").animate({ scrollTop: 0 }, "slow");
                    event.stopImmediatePropagation();
                }  
            });
        });