I cannot apply the CSS property "scroll-behaviour:smooth" when I use the property "scrollTop" in Javascript

first of all, sorry if I have a spelling or grammar error. I'm from Argentina.

I want a smooth scroll when I click on a link that carry me to the contact section (id=contact) or to the client section (id=client). But also I use a code to make an automatic loop which interferes with the smooth scroll.

 <body>
  <header>
    <section class="header_menu-container">
      <div class="title-container">
        <img src="images/logo_chico.jpg" alt="Bl Consultores">
        <h1>BL CONSULTORES</h1>
      </div>
      <span class="toggle-nav"></span>
      
        <div id="menu" class="menu-container">
          <div class="title-menu_container">
            <h3>MENU</h3>
            <span id="close-button"></span>
          </div>
          <nav>
            <ul>
              <li><a href="index.html">Inicio</a></li>
              <li><a href="#client" class="scroll">Nuestros Clientes</a></li>
              <li><a href="#contact" class="scroll">Contacto</a></li>
              <li><a href="servicios.html">Dpto. Productos</a></li>
              <li><a href="">Prefectura Naval</a></li>
              <li><a href="bases/ingreso.htm" target="_blank" rel="noopener noreferrer">Consulta de Expedientes</a></li>
            </ul>
          </nav>
        </div>
      </section>
      <div class="header-title_container">
        <h2>El mejor servicio de consultoría</h2>
        <a href="#contact">Contáctanos</a>
      </div>
    
  </header>
  <main>
    <section class="who-section">
      <div>
        <h3>¿Cuál es nuestro trabajo?</h3>
        <p>Nuestro trabajo profesional incluye áreas de la Propiedad Intelectual y aquellos temas relacionados con Comercialización de Productos e inscripciones, importaciones y exportaciones, especializándonos en el area de alimentos.</p>
      </div>
      <div>
        <img src="images/businessman-examining-papers-at-table.jpg" alt="Consultora" >
      </div>
   <section id="client" class="client-section">
      <h3>Tenemos la confianza de nuestros clientes</h3>
   </section>
    <section id="trying">
      <h3>Te mantenemos informado</h3>
      <div id="contain">
        <div id="scroll-text">
          <h4>07/06/2012 Disposicion ANMAT 2997/12 </h2>
        
        </div>
        <div id="scroll-text">
          <h4>06/06/2012 Disposicion ANMAT 3038/12</h4>
       
        </div>

        <div id="scroll-text">
          <h4>05/06/2012 Disposicion ANMAT 3097/12</h4>
         
        </div>

        <div id="scroll-text">
          <h4>04/06/2012 Disposicion ANMAT 2999/12 </h4>
        
        </div>

        <div id="scroll-text">
          <h4>04/06/2012 Disposicion ANMAT 2998/12</h4>
         
        </div>

        <div id="scroll-text">
          <h4>01/06/2012 Disposicion ANMAT 2993/12</h4>
       
        </div>

        <div id="scroll-text">
          <h4>29/05/2012 Disposicion ANMAT 2897/12</h4>
       
        </div>

        <div id="scroll-text">
          <h4>Disposición 1207/2012-ANMAT - Prohibe la fabricación de mamaderas que contengan BISFENOL A</h4>
        </div>

        <div id="scroll-text">
          <h4>18/10/11 - Resolución 735/11-SENASA - PRODUCTOS ALIMENTICIOS - Aprueba Reglamento Técnico sobre Identidad y Calidad de Pimentón</h4>
       
        </div>
      </div>
    </section>
  <section id="contact" class="contact-section">
  </section>
  </main>
</body>  

here is the css code

html{
    font-size:62.5%;
    font-family: 'DM Sans',sans-serif;
    scroll-behavior: smooth;
}

And this is the javascript code with jquery that I use to make the scroll loop, which shows the text blocks div (id ="scroll-text")while they are going down

  var time;
  const contain = $("#contain");
  const scroll_text = $("#scroll-text");
    $(document).ready(function(){
      append_clone();
      pageScroll();

      contain.mouseover(function() {
        clearTimeout(time);
          }).mouseout(function() {
        pageScroll();
          });

    });

  function append_clone(){
  scroll_text.each(function(){
  
  scroll_text.clone().appendTo(contain);
});
}

function pageScroll() {
var objDiv = document.getElementById("contain");

      objDiv.scrollTop = objDiv.scrollTop + 2;
 
  time = setTimeout('pageScroll()', 100);
}

the code line that produce the error is objDiv.scrollTop = objDiv.scrollTop + 2;



Read more here: https://stackoverflow.com/questions/67394015/i-cannot-apply-the-css-property-scroll-behavioursmooth-when-i-use-the-propert

Content Attribution

This content was originally published by Marco P. at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: