如何创建指向最初由slideToggle隐藏的部分的链接

Question

我有几个隐藏的div和匹配的按钮来显示它们。 当我单击按钮时，将显示匹配的DIV。我要添加的内容将自动滚动到显示的部分。

由于该部分是隐藏的，因此当我单击时滚动不完整（大约50像素）。如果再次单击该按钮，滚动将完成。

$(document).ready(function() {
  $('input[type=image]').click(function() {
    var contentID = `#${this.id}Contenu`;
    var isContentVisible = $(contentID).is(':visible');
    if (!isContentVisible) {
      $('div[id$=Contenu]').hide();
      $(contentID).slideToggle(100);
    }
  });
});

.vignettesContenus {
  padding: 5px;
  text-align: center;
  background-color: #00011f;
  display: none;
}

#contenus {
  background-color: #e8f1fa;
  color: black;
  font-size: 28px;
  text-align: justify;
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>


<div id="discovered">

  <div id="file" class="container">
    <a href="#edsContenu"> <input id="eds" type="image" src="IMAGES/PNG/eds.png" alt="EDS system" height="250px" width="250px" /></a>
  </div>


  <div id="file" class="container">
    <a href="#bridgeContenu"> <input id="bridge" type="image" src="IMAGES/PNG/pont.png" alt="pont photonique" height="250px" width="250px" /></a>
  </div>
</div>

<div id="edsContenu" class="vignettesContenus">

  <section id="content">

    <div id="text">

      <p>EDS©, pour Electrophotonic DataPhoton System » est un dispositif unique permettant d’acquérir, dans le spectre UV, les luminescences d’un corps soumis à son action. Ces luminescences sont caractéristiques de l’objet étudié. <br><br> Le schéma
        ci-dessous montre le processus de capture d'images utilisé par notre dispositif patenté EDS.</p>

      <img src="IMAGES/PNG/schema.png" width="500px" alt="laboratoire électrophotonique CORAMP">

      <p> L'objet à étudier est placé sur l'électrode.<br><br> Un champ électromagnétique distinctif et spécifique est généré, provoquant un effet de couronne. Celui- ci est enregistré par une caméra scientifique à très haute performance qui
        transmet à son tour l'image captée à un ordinateur pour analyse.<br><br> L'efficacité du dispositif et la qualité des résultats obtenus tiennent :
        <ul>
          <li>à la stabilité du générateur de champ EDS, générateur qui, par ailleurs, offre une définition informationnelle jamais obtenue jusqu'à présent ;</li>
          <li>aux propriétés de l'électrode spécialement fabriquée à cet effet ;</li>
          <li>aux outils de captation (optique : Fujinon High Resolution UV Lenses / caméra : scientific camera Hamamatsu) »</li>
        </ul>

      </p>
    </div>
  </section>

</div>


<div id="bridgeContenu" class="vignettesContenus">

  <section id="content">

    <div id="text">

      <p>Les ponts photoniques constituent une découverte importante sur laquelle une communication a été présentée, en 2014, à l’occasion d’une rencontre internationale organisée par la Bioelectromagnetic Society en Afrique du Sud.<br><br> Des ponts
        photoniques peuvent apparaître ou non, dans le spectre UV, lorsque deux produits ou un système biologique et un produit sont placés à proximité l’un de l’autre sur une électrode spécifique appelée « support de conteneurs » et qu’un champ
        électromagnétique important est généré. </p>

      <br><br>

      <div id="imgPonts">
        <img src="IMAGES/JPG/doigt.jpg">
        <img src="IMAGES/JPG/support_conteneurs.jpg" title="Support">
        <img src="IMAGES/JPG/pont_photo_affinite.jpg" title="Pont d'affinité" alt="pont photonique affinité">
      </div>

      <br><br>

      <p>Ces ponts semblent indiquer une affinité entre les produits testés. En effet, dans le cas contraire, on n’observe aucun échange photonique, voire à l’inverse une barrière telle que la montre l’image ci-dessous.</p>

      <div id="imgPonts"> <img src="IMAGES/JPG/pont_photon_repulsion.jpg" title="Pont répulsion" alt="pont photonique répulsion"></div>

      <br>

      <p>Ce phénomène singulier est régulièrement utilisé expérimentalement dans différents domaines de recherche (agro-alimentaire, alicaments, principes actifs, eaux...). Il est possible d’en mesurer les valeurs et ainsi de classifier le degré
        d’affinité en fonction des différents produits évalués.</p>

    </div>
  </section>

</div>

Answer 1

这是因为slideToggle() !== scrollTo()。您需要将窗口滚动到元素位置。 slideToggle()只需切换幻灯片动画。您可以将切换视为就地“展开”或“崩溃”。

jQuery def：

  

以滑动方式显示或隐藏匹配的元素。

下次单击该元素时，它直接进入元素的原因是因为您的逻辑格式错误：

if(!isContentVisible){ 
  $('div[id$=Contenu]').hide(); 

如果未隐藏，则隐藏所有具有 only 这样的ID的div。因此，它似乎无法正常工作。

$(document).ready(function() {
  $('input[type=image]').click(function() {
    $('div[id$=Contenu]').hide();
    var contentID = `#${this.id}Contenu`;
    var isContentVisible = $(contentID).is(':visible');
    if (!isContentVisible) {
      $(contentID).show();
    }
  });
});

.vignettesContenus {
  padding: 5px;
  text-align: center;
  background-color: #00011f;
  display: none;
}

#contenus {
  background-color: #e8f1fa;
  color: black;
  font-size: 28px;
  text-align: justify;
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>


<div id="discovered">

  <div id="file" class="container">
    <a href="#edsContenu"> <input id="eds" type="image" src="IMAGES/PNG/eds.png" alt="EDS system" height="250px" width="250px" /></a>
  </div>


  <div id="file" class="container">
    <a href="#bridgeContenu"> <input id="bridge" type="image" src="IMAGES/PNG/pont.png" alt="pont photonique" height="250px" width="250px" /></a>
  </div>
</div>

<div id="edsContenu" class="vignettesContenus">

  <section id="content">

    <div id="text">

      <p>EDS©, pour Electrophotonic DataPhoton System » est un dispositif unique permettant d’acquérir, dans le spectre UV, les luminescences d’un corps soumis à son action. Ces luminescences sont caractéristiques de l’objet étudié. <br><br> Le schéma
        ci-dessous montre le processus de capture d'images utilisé par notre dispositif patenté EDS.</p>

      <img src="IMAGES/PNG/schema.png" width="500px" alt="laboratoire électrophotonique CORAMP">

      <p> L'objet à étudier est placé sur l'électrode.<br><br> Un champ électromagnétique distinctif et spécifique est généré, provoquant un effet de couronne. Celui- ci est enregistré par une caméra scientifique à très haute performance qui
        transmet à son tour l'image captée à un ordinateur pour analyse.<br><br> L'efficacité du dispositif et la qualité des résultats obtenus tiennent :
        <ul>
          <li>à la stabilité du générateur de champ EDS, générateur qui, par ailleurs, offre une définition informationnelle jamais obtenue jusqu'à présent ;</li>
          <li>aux propriétés de l'électrode spécialement fabriquée à cet effet ;</li>
          <li>aux outils de captation (optique : Fujinon High Resolution UV Lenses / caméra : scientific camera Hamamatsu) »</li>
        </ul>

      </p>
    </div>
  </section>

</div>


<div id="bridgeContenu" class="vignettesContenus">

  <section id="content">

    <div id="text">

      <p>Les ponts photoniques constituent une découverte importante sur laquelle une communication a été présentée, en 2014, à l’occasion d’une rencontre internationale organisée par la Bioelectromagnetic Society en Afrique du Sud.<br><br> Des ponts
        photoniques peuvent apparaître ou non, dans le spectre UV, lorsque deux produits ou un système biologique et un produit sont placés à proximité l’un de l’autre sur une électrode spécifique appelée « support de conteneurs » et qu’un champ
        électromagnétique important est généré. </p>

      <br><br>

      <div id="imgPonts">
        <img src="IMAGES/JPG/doigt.jpg">
        <img src="IMAGES/JPG/support_conteneurs.jpg" title="Support">
        <img src="IMAGES/JPG/pont_photo_affinite.jpg" title="Pont d'affinité" alt="pont photonique affinité">
      </div>

      <br><br>

      <p>Ces ponts semblent indiquer une affinité entre les produits testés. En effet, dans le cas contraire, on n’observe aucun échange photonique, voire à l’inverse une barrière telle que la montre l’image ci-dessous.</p>

      <div id="imgPonts"> <img src="IMAGES/JPG/pont_photon_repulsion.jpg" title="Pont répulsion" alt="pont photonique répulsion"></div>

      <br>

      <p>Ce phénomène singulier est régulièrement utilisé expérimentalement dans différents domaines de recherche (agro-alimentaire, alicaments, principes actifs, eaux...). Il est possible d’en mesurer les valeurs et ainsi de classifier le degré
        d’affinité en fonction des différents produits évalués.</p>

    </div>
  </section>

</div>