I am working on a rather simple website for a digital signage display. I have several full page (fullscreen) containers each labeled with a class name such as "Intro", "Services", "Projects", etc. I want to be able to have the website automatically scroll from the intro "page" to the next services page after a set amount of time, and then do the same for projects. Once I've reached the projects page and have been on it for a set time, then I want to automatically scroll back up to the top and start again. I'm fine with this solution being either in HTML somehow, or by using Javascript. If you need any code snippets, more info, or even a link to my test website please let me know. I found a live preview of a similar design to my website, if you need a better idea on what I have, but this one doesn't auto scroll either.
Asked
Active
Viewed 36 times
-1
-
Hello, Have you tried with a carousell ? – Csharls May 05 '22 at 04:18
-
@Csharls Thanks to your suggestion I went ahead and implemented a nice solution using PagePiling.js, feel free to see my own answer for more info. – Kenyon May 05 '22 at 15:45
2 Answers
0
You might like to take a look at this question, it has the automatic scroll and also a timer to scroll back up, hope it works! how to automatically scroll down a html page?
Alexander García
- 139
- 7
0
I went ahead and took a different route, and implemented PagePiling.js and set each of my "pages" as an anchor spot. From there, I made sure that loopBottom: true and then implemented a function that I call on page load that goes like this
function pageScroll() {
$.fn.pagepiling.moveSectionDown();
scrolldelay = setTimeout(pageScroll,10000); }
This is essentially exactly what I was looking for, thanks to @Csharls for suggesting using a carousell, as I would have never thought about doing this without that suggestion.
Kenyon
- 23
- 4