Здравствуйте. Есть необходимость выполнять, с задержкой, прокрутку страницы до конца страницы. По достижению "подвала" , так же с задержкой вернуться наверх.
Можно ли как-то это реализовать используя только HTML и CSS и какими средствами ?
Думаю здесь одним лишь HTML + CSS не обойтись, нужен JavaScript. По крайней мере решения только с использованием CSS я не вижу. Можно воспользоваться jQuery и какими-нибудь доп. библиотеками для работы со scroll'ом, но можно обойтись и чистым javascript'ом. Например как-то так:
<script type="text/javascript">
//Начать вниз сколлинг после (время в миллисикундах)
var startAfter = 5000;
//Остановиться внизу на (время в миллисекундах)
var waitOnBottom = 2000;
//Положение подвала (footer - это ID элемента подвала)
var max = document.getElementById('footer').offsetTop - window.innerHeight + document.getElementById('footer').offsetHeight;
setTimeout(function () {
var y = 0;
var loopScrollDown = setInterval(function () {
y++;
window.scrollBy(0,1);
if(y >= max){
setTimeout(function () {
var loopScrollUp = setInterval(function () {
y--;
window.scrollBy(0,-1);
if(y <= 0){
clearInterval(loopScrollUp);
}
},1);
},waitOnBottom);
clearInterval(loopScrollDown);
}
},1);
}, startAfter);
</script>
Разместите данный скрипт где-нибудь внизу страницы, например после закрывающего тега </body>. Спустя 5 секунд после загрузки страницы начнется скролл, он остановится внизу, подождет 2 секнуды и начнется обратный скролл. Конечно же решение не идеально, и если в момент скроллинга (или до начала) пользователь вмешается (поскроллит страницу), то все может пойти немного не по сценарию. Например скроллинг будет не до конца или что-нибудь подобное.
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости