Í cannot aply the css property "scrol-behaviour:smooth" when I use the property "scrollTop" in Javascript

  css, html, javascript, jquery

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.

 <nav>
            <ul>
              <li><a href="index.html">Inicio</a></li>
              <li><a href="servicios.html">Dpto. Productos</a></li>
              <li><a href="">Prefectura Naval</a></li>
              <li><a href="#client" class="scroll">Nuestros Clientes</a></li>
              <li><a href="bases/ingreso.htm" target="_blank" rel="noopener noreferrer">Consulta de Expedientes</a></li>
              <li><a href="#contact" class="scroll">Contacto</a></li>
            </ul>
          </nav>

And this is the javascript code with jquery that I use to make the scroll loop

  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;

Source: Ask Javascript Questions

LEAVE A COMMENT