Автоматическая прокрутка html,css

276
18 января 2018, 19:08

Здравствуйте. Есть необходимость выполнять, с задержкой, прокрутку страницы до конца страницы. По достижению "подвала" , так же с задержкой вернуться наверх.

Можно ли как-то это реализовать используя только HTML и CSS и какими средствами ?

Answer 1

Думаю здесь одним лишь 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 секнуды и начнется обратный скролл. Конечно же решение не идеально, и если в момент скроллинга (или до начала) пользователь вмешается (поскроллит страницу), то все может пойти немного не по сценарию. Например скроллинг будет не до конца или что-нибудь подобное.

READ ALSO
Подсказки при валидации формы + Kube css

Подсказки при валидации формы + Kube css

Как сделать, чтобы span error высвечивался если поле пустое и высвечивался span sucsess если поле заполнено?

291
Проблема с выпадающим блоком [требует правки]

Проблема с выпадающим блоком [требует правки]

ЗдравствуйтеВозникла проблема: есть блок, он оформлен, как ссылка

285
WordPress тема Twenty Seventeen. Добавить виджеты в footer

WordPress тема Twenty Seventeen. Добавить виджеты в footer

Как добавить еще два места для виджетов в footer, так чтобы они находились на одном этаже

266