Это невозможно только с HTML и / или CSS.
В большинстве случаев вы хотите, чтобы страница взаимодействовала с пользователем, например, включение чего-либо / выключение кнопкой, надо javascript. Javascript позволяет вам реагировать на действия пользователя на той же странице , без перехода на другую страницу, как это делают теги <a> и <form>.
Итак, вы можете создать эту функцию автоматической прокрутки, используя javascript / jQuery и повторяющуюся функцию.
jQuery на самом деле не требуется, но 76% всех веб-сайтов используют его , так что это хорошо чтобы знать это. Я считаю, что jQuery немного упрощает использование javascript, поэтому в этом примере я использовал jQuery. Если вы новичок в изучении javascript, некоторые учебные пособия по jQuery, например этот от SO maven Slaks , могут быть хорошим местом для начала.
var ok2scroll = false;
doscroll();
$('button').click(() => {
$('button').toggleClass('scrolling');
ok2scroll = !ok2scroll;
});
function doscroll(){
if (ok2scroll){
document.body.scrollTop += 10; /* <body> */
document.documentElement.scrollTop += 10; /* <html> */
}
setTimeout(() => { doscroll() },300);
}
section{width:60%;margin:0 auto;}
button{position:fixed;top:0;left:0;}
.scrolling{background:palegreen;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button>Scroll</button>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id venenatis a condimentum vitae sapien pellentesque habitant. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Id cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Eu augue ut lectus arcu bibendum at varius vel. Mollis aliquam ut porttitor leo a diam. Tincidunt augue interdum velit euismod. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Semper viverra nam libero justo laoreet sit amet cursus sit. Commodo quis imperdiet massa tincidunt nunc pulvinar.
Scelerisque eu ultrices vitae auctor. Tortor dignissim convallis aenean et tortor at risus viverra adipiscing. Elementum pulvinar etiam non quam lacus suspendisse faucibus. Neque vitae tempus quam pellentesque nec nam. Nunc aliquet bibendum enim facilisis gravida neque convallis. Vitae ultricies leo integer malesuada nunc vel risus. Et tortor at risus viverra adipiscing at in tellus integer. Nascetur ridiculus mus mauris vitae. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Volutpat consequat mauris nunc congue. Amet nisl purus in mollis nunc sed id. Laoreet non curabitur gravida arcu ac tortor.
Vulputate mi sit amet mauris commodo. Proin libero nunc consequat interdum varius. Vestibulum morbi blandit cursus risus at ultrices. Ut morbi tincidunt augue interdum velit euismod in pellentesque massa. Fames ac turpis egestas integer eget aliquet nibh praesent tristique. Tristique risus nec feugiat in fermentum. Mattis rhoncus urna neque viverra. Ullamcorper eget nulla facilisi etiam. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Purus gravida quis blandit turpis cursus in hac. Nunc sed velit dignissim sodales ut eu. Vitae aliquet nec ullamcorper sit amet risus nullam eget. Id volutpat lacus laoreet non curabitur.
Pharetra magna ac placerat vestibulum lectus mauris ultrices eros in. Id cursus metus aliquam eleifend mi in nulla posuere. Mattis vulputate enim nulla aliquet porttitor. Egestas maecenas pharetra convallis posuere morbi leo. Convallis tellus id interdum velit laoreet id donec ultrices tincidunt. Sed vulputate odio ut enim. Maecenas sed enim ut sem viverra aliquet eget sit. Maecenas ultricies mi eget mauris pharetra. Tempor nec feugiat nisl pretium fusce id. Elementum nisi quis eleifend quam.
Duis convallis convallis tellus id. Facilisis gravida neque convallis a cras. Pharetra convallis posuere morbi leo urna molestie. Ornare quam viverra orci sagittis. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et. Vulputate sapien nec sagittis aliquam. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Nullam eget felis eget nunc lobortis. Mauris augue neque gravida in fermentum. Enim tortor at auctor urna nunc id cursus metus aliquam. Adipiscing elit pellentesque habitant morbi tristique senectus et. Vitae nunc sed velit dignissim. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Semper eget duis at tellus at urna. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Enim ut tellus elementum sagittis vitae et leo duis. Tincidunt dui ut ornare lectus sit amet est placerat.
</section>
Ссылка: (объясняет, почему вам нужно прокручивать теги body и html)
https://www.w3schools.com/jsref/prop_element_scrolltop.asp