Как автоматически go наверх через x секунд, если пользователь прокручивал вниз

Question

Я новичок. Новое в JS / CSS и переполнении стека.

У меня есть поле div со свойством CSS overflow: auto. Если пользователь прокручивает вниз в поле DIV, он должен автоматически снова прокрутиться к вершине через x секунд.

Возможно ли это? И как это возможно?

Я думаю, что он должен определить, находится ли полоса прокрутки в начальном положении, чтобы позволить отсчет. Через x секунд он должен go вернуться наверх. Правильно?

Спасибо.

Answer 1

Вот не jQuery версия:

var timeout;

function returnToTop() {
    if (!timeout) {
        timeout = setTimeout(() => {
            document.getElementById("scrollable").scroll(0, 0);
            timeout = null;
        }, 5000)
    }
}

#scrollable {
  height: 200px;
  overflow-y: scroll;
}

#interior {
  height: 500px;
}

<div id="scrollable" onscroll="returnToTop()">
  <div id="interior">
    scroll me!
  </div>
</div>

Answer 2

попробуйте это с setTimeOut() function и страницей без дела

  
 $(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       setTimeout(function(){ 
        $('html,body').animate({
            scrollTop: 0
        }, 700);
       }, 5000);
   }
});

var idleTime = 0;
$(document).ready(function () {
    //Increment the idle time counter every second.
    var idleInterval = setInterval(timerIncrement, 1000); // 1 second

    //Zero the idle timer on mouse movement.
    $(this).mousemove(function (e) {
        idleTime = 0;
    });
    $(this).keypress(function (e) {
        idleTime = 0;
    });
});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 10) { // 10 seconds
        idleTime = 0;
        $('html,body').animate({
            scrollTop: 0
        }, 700);
    }
}

#content {
    height: 2000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">Scroll &darr;</div>