Delay in the beginning of auto-scroll function (Javascript)-CodePudding

I have a webpage that displays a list of items, and I want to have an auto-scroll feature that scrolls down, then up, then down, etc., in an infinite loop. I have this working, but my only problem is that I want the loop to stop/delay at the top of the page for a few seconds before it starts to scroll down (at the bottom there is such a delay but at the top I cannot get it to work).

I have tried using a sleep function with a promise, but this led to the page getting stuck at the bottom.

/* Include the padding and border in an element's total width and height */
* {
    box-sizing: border-box;
    width: 550px;
  }

  #myUL > li {
    color: rgba(0, 0, 0, 1);
    background: rgba(0, 178, 254, 0.1);
    text-overflow: ellipsis;
    overflow: hidden; 
    width: 550px; 
    white-space: nowrap;
  }
  /* Set all odd list items to a different color (zebra-stripes) */
  #myUL > li:nth-child(odd) {
    background: rgba(23, 175, 240, 0.8);
  }

  /* Remove margins and padding from the list */
  ul {
    margin: 0;
    padding: 0;
  }


  /* Style the list items */
  ul li {
    cursor: pointer;
    position: relative;
    padding: 12px 8px 12px 40px;
    background: rgb(163, 220, 251);
    font-size: 18px;
    transition: 0.2s;
  }


 #myDIV { 
   
    border-radius: 30px 30px 0px 0px;
    background-color: #97abee;
   
    color: rgb(252, 221, 221);
    text-align: center;
    border-radius: 0.5;
    border: 1px solid;


    position: fixed;
    top: 0;
    z-index: 1;
     
  }
  

  #spacingdiv {
    width: 100%;
    height: 62px;
 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css"/>
  
</head>
<body>
    <script src="jquery-3.6.0.min.js"></script>


    <script>

        var Height = document.documentElement.scrollHeight;
        console.log(Height);
        var currentHeight = 0;
        var bool = true;
        var step = 10;
        var speed = 100;
        var interval = setInterval(scrollpage, speed);

        function scrollpage() {
            // if bottom or top of page we flip the boolean operator
            if (currentHeight < 0 || currentHeight > Height) {   
                bool = !bool;
            };
            // if bool is true we scroll down
            if (bool) {
                window.scrollTo(0, currentHeight  = step);

            // if bool is false we scroll up
            } else {
                // if you don't want to continue scroll 
                window.scrollTo(0, currentHeight -= step);

            }
        };

        //setTimeout(interval, 2000);
        
        
        </script>

    
    
    <div id="myDIV">
        <h2>My List</h2>
        
    </div>
    
    <div id="spacingdiv"></div>

    <div >
        <ul id="myUL">
            <li>somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
            </li>
        
            <li>somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>
        </ul>
    </div> 
</body>

</html>

CodePudding user response：

I suggest to you a solution more clean and smooth. You can change the animation easing too.

Cheers

var direction = false;
var scrollTime = 5000;
var delay = 1000;

function scrollPage() {

  direction = !direction;

  $("html, body").animate({
    scrollTop: direction ? $(document).height() : 0
  }, {
    duration: scrollTime,
    easing: "linear"
  });

}

$(document).ready(function() {
  setTimeout(scrollPage, delay);
  setInterval(scrollPage, scrollTime   delay);
});

/* Include the padding and border in an element's total width and height */

* {
  box-sizing: border-box;
  width: 550px;
}

#myUL>li {
  color: rgba(0, 0, 0, 1);
  background: rgba(0, 178, 254, 0.1);
  text-overflow: ellipsis;
  overflow: hidden;
  width: 550px;
  white-space: nowrap;
}


/* Set all odd list items to a different color (zebra-stripes) */

#myUL>li:nth-child(odd) {
  background: rgba(23, 175, 240, 0.8);
}


/* Remove margins and padding from the list */

ul {
  margin: 0;
  padding: 0;
}


/* Style the list items */

ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  background: rgb(163, 220, 251);
  font-size: 18px;
  transition: 0.2s;
}

#myDIV {
  border-radius: 30px 30px 0px 0px;
  background-color: #97abee;
  color: rgb(252, 221, 221);
  text-align: center;
  border-radius: 0.5;
  border: 1px solid;
  position: fixed;
  top: 0;
  z-index: 1;
}

#spacingdiv {
  width: 100%;
  height: 62px;
}

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

<body>



  <div id="myDIV">
    <h2>My List</h2>

  </div>

  <div id="spacingdiv"></div>

  <div >
    <ul id="myUL">
      <li>somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
      </li>

      <li>somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>

      <li>something
      </li>
    </ul>
  </div>
</body>

CodePudding user response：

You can use jquery for minimize line of codes jquery cdn

function scrollDown(el) {
    el.animate({
        scrollTop: el[0].scrollHeight
    }, 5000, function() {
        scrollUp(el)
    });
};

function scrollUp(el) {
    el.animate({
        scrollTop: 0
    }, 5000, function() {
        scrollDown(el);
    });
};

scrollDown($("html,body"));

/* Include the padding and border in an element's total width and height */
* {
    box-sizing: border-box;
    width: 550px;
  }

  #myUL > li {
    color: rgba(0, 0, 0, 1);
    background: rgba(0, 178, 254, 0.1);
    text-overflow: ellipsis;
    overflow: hidden; 
    width: 550px; 
    white-space: nowrap;
  }
  /* Set all odd list items to a different color (zebra-stripes) */
  #myUL > li:nth-child(odd) {
    background: rgba(23, 175, 240, 0.8);
  }

  /* Remove margins and padding from the list */
  ul {
    margin: 0;
    padding: 0;
  }


  /* Style the list items */
  ul li {
    cursor: pointer;
    position: relative;
    padding: 12px 8px 12px 40px;
    background: rgb(163, 220, 251);
    font-size: 18px;
    transition: 0.2s;
  }


 #myDIV { 
   

    background-color: #97abee;
   
    color: rgb(252, 221, 221);
    text-align: center;
    border-radius: 0.5;
    border: 1px solid;


    position: fixed;
    top: 0;
    z-index: 1;
     
  }
  

  #spacingdiv {
    width: 100%;
    height: 62px;
   
    
 }

<script src="jquery-3.6.0.min.js"></script>
<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>


    
    
    <div id="myDIV">
        <h2>My List</h2>
        
    </div>
    
    <div id="spacingdiv"></div>

    <div >
        <ul id="myUL">
            <li>somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
            </li>
        
            <li>somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>

            <li>something
            </li>
        </ul>
    </div> 
</body>

</html>