Подтвердить что ты не робот

Плавная прокрутка только с чистым css

Как сделать гладкую прокрутку только с чистым css.

У меня есть этот код Fiddle

HTML

<a id="up" href="#down">down</a>
<div class="up"></div>

<a id="down" href="#up">up</a>
<div class="down"></div>

CSS

.up {
    width:100px;
    height: 600px;
    background-color: red;
}

.down {
    width:100px;
    height: 400px;
    background-color: yellow;
}

Я знаю, что :target может помочь, но я не знаю, как использовать его с transition.

Ответ 1

Вы можете сделать это с помощью чистого CSS, но вам нужно будет жестко закодировать суммы прокрутки смещения, которые могут быть не идеальными, если вы изменяете содержимое страницы, или должны измениться размеры вашего контента, если изменить размер окна.

Вы, вероятно, лучше всего использовать, например. jQuery, в частности:

$('html, body').stop().animate({
   scrollTop: element.offset().top
}, 1000);

Полная реализация может быть:

$('#up, #down').on('click', function(e){
    e.preventDefault();
    var target= $(this).get(0).id == 'up' ? $('#down') : $('#up');
    $('html, body').stop().animate({
       scrollTop: target.offset().top
    }, 1000);
});

Где element - это целевой элемент для прокрутки и 1000 - это задержка в мс до завершения.

Демо-скрипт

Преимущество заключается в том, что независимо от того, какие изменения в размерах вашего контента, функция не нуждается в изменении.

Ответ 2

Вам нужно использовать селектор target.

Вот скрипка с другим примером: http://jsfiddle.net/YYPKM/3/