Здравствуйте. Есть необходимость выполнять, с задержкой, прокрутку страницы до конца страницы. По достижению "подвала" , так же с задержкой вернуться наверх.
Можно ли как-то это реализовать используя только 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 секнуды и начнется обратный скролл. Конечно же решение не идеально, и если в момент скроллинга (или до начала) пользователь вмешается (поскроллит страницу), то все может пойти немного не по сценарию. Например скроллинг будет не до конца или что-нибудь подобное.
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Как сделать, чтобы span error высвечивался если поле пустое и высвечивался span sucsess если поле заполнено?
ЗдравствуйтеВозникла проблема: есть блок, он оформлен, как ссылка
Как добавить еще два места для виджетов в footer, так чтобы они находились на одном этаже