JS auto scroll looping

Question

I'm not familiar with js. I found this code. I need a help to improve this to loop the scrolling. Now it scroll down for once. What I need is when the list gets to end, need to start with the top of the list again itself. Please help. Thank you.

Fiddle: https://jsfiddle.net/EshanRajapakshe/43dhju4m/

Ex:

• List content 1
• List content 2
• List content 3
• List content 4
• List content 5
• List content 1
• List content 2
• List content 3

Code:

quadroDeAvisos = document.getElementById("quadroDeAvisos")
lineUp = document.getElementById("lineUp")
avisos = lineUp.getElementsByClassName("avisos")

var count = 0;
var limite = avisos.length -1;
var myVar=setInterval(function(){atualiza()},2000);

function atualiza() {
    if(count == limite)
    count = 0;
  lineUp.style.marginTop = 65*count*(-1)+"px"
  count++
}

Answer 1

As per your logic I have updated your code please check

quadroDeAvisos = document.getElementById("quadroDeAvisos")
lineUp = document.getElementById("lineUp")
avisos = lineUp.getElementsByClassName("avisos")

var count = 0;
var myVar=setInterval(function(){atualiza()},2000);

function atualiza() {
  lineUp.style.marginTop = 65*count*(-1)+"px"
  count++
  if(count == 5)
    count = 0
}

.quadroDeAvisos{
  width: 134px;
  height: 125px;
  overflow: hidden;
}

#quadroDeAvisos .avisos {
  background-color: #ee9d20;
  border-color: #ba7c18;
}

.avisos {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
  color: #fff;
  height: 50px;
  width: 132px;
  font-size: 12px;
  padding: 0;
  overflow: hidden;
}

.lineUp{
  transition: 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quadroDeAvisos" id="quadroDeAvisos">
<div class="lineUp" id="lineUp">
<div class="avisos">
  <p>List content 1</p>
<p>Sub content</p> 
</div>
<div class="avisos">
  <p>List content 2</p>
<p>Sub content</p> 
</div>
<div class="avisos">
  <p>List content 3</p>
<p>Sub content</p> 
</div>
<div class="avisos">
  <p>List content 4</p>
<p>Sub content</p> 
</div>
<div class="avisos">
  <p>List content 5</p>
<p>Sub content</p> 
</div>

</div></div></div>

Answer 2

Check I updated your logic with your requirment. Hope it helps

function autoScrollDown(){
    $(".inner").css({top:-$(".lineUp").outerHeight()}) // jump back
               .animate({top:0},10000,"linear", autoScrollDown); // and animate
}
function autoScrollUp(){
    $(".inner").css({top:0}) // jump back
               .animate({top:-$(".lineUp").outerHeight()},10000,"linear", autoScrollUp); // and animate
}
// fix hight of lineUp:
$('.lineUp').css({maxHeight: $('.inner').height()});
// duplicate content of inner:
$('.inner').html($('.inner').html() + $('.inner').html());
autoScrollUp();

*{
    margin:0;
    padding:0;
}
.inner{
    position:relative;
    top:0px;
}
.lineUp{
    overflow:hidden;
}
.avisos {
  display: block;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
  color: #fff;
  height: 50px;
  width: 132px;
  font-size: 12px;
  padding: 0;
  overflow: hidden;
  background-color: #ee9d20;
  border-color: #ba7c18;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lineUp">
    <div class="inner" id="lineUp">
        <h3 class="avisos">List content 1<p> Sub content </p></h3>
        <h3 class="avisos">List content 2<p> Sub content </p></h3> 
        <h3 class="avisos">List content 3<p> Sub content </p></h3> 
    </div>
</div>