Smooth scrolling with just pure css

Question

How can I make a smooth scrolling with just pure css.

I have this code 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;
}

I know :target can help but I don't know how to use it with transition.

I think the answers to this question and the one @sidney marked possible duplicate are vague on what "scrolling" is. The `transition` effect is only good for changing the positioning (NB: not scroll position) and so isn't really 'scrolling' as achieved with Skrollr or Jquery — Louis Maddox, Apr 30 '14 at 17:41

score 30 · Answer 1 · answered Mar 07 '14 at 10:03

30

You need to use the target selector.

Here is a fiddle with another example: http://jsfiddle.net/YYPKM/3/

answered Mar 07 '14 at 10:03

sidney

2,704
3
28
44

but it will be harder if i change the height of my DIVs. – Hayi Mar 07 '14 at 10:19
2

You should do so, if you want pure css only. – sidney Mar 07 '14 at 10:29
1

Yes this is the price – Hayi Mar 07 '14 at 10:48
That is a cool trick. I've never seen the `:target` pseudo-class before. – Wray Bowling Feb 20 '16 at 03:43

SW4 · Accepted Answer · 2014-03-07T10:05:51.267

9

You can do this with pure CSS but you will need to hard code the offset scroll amounts, which may not be ideal should you be changing page content- or should dimensions of your content change on say window resize.

You're likely best placed to use e.g. jQuery, specifically:

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

A complete implementation may be:

$('#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);
});

Where element is the target element to scroll to and 1000 is the delay in ms before completion.

Demo Fiddle

The benefit being, no matter what changes to your content dimensions, the function will not need to be altered.

edited Mar 07 '14 at 10:05

answered Mar 07 '14 at 09:59

SW4

69,876
20
132
137

thanks it works great at Fiddle but can you explain me this `scrollTop: element.offset().top`, why it is hust `top` or `scrollTop` ? I see no `down`. – Hayi Mar 07 '14 at 10:12
In the fiddle, the function works out which of the two link elements has been clicked, then sets the `target` element to the opposite one, the page is the scrolled to the top of this `target` – SW4 Mar 07 '14 at 10:15
But when we click on `down` we have to `scrollDown` not `scrollTop`. – Hayi Mar 07 '14 at 10:23
1

The issue is semantic- it means scroll to the top of the passed element, it doesnt mean the direction of scroll – SW4 Mar 07 '14 at 10:25
I try also this [Fiddle](http://jsfiddle.net/dN4S4/2/) but i notice a strange behavior just after the click. – Hayi Mar 07 '14 at 10:51
1

You need to do event.preventDefault() otherwise the browser is performing confliciting behaviour with the default anchor tag position change- copy the code in the answer – SW4 Mar 07 '14 at 10:56
Yes right thanks a lot man but i didn't understand yet `scrollTop: target.offset().top` i will think again myself and open a new question i don't get it. – Hayi Mar 07 '14 at 11:09
4

The question asked for "just pure CSS" not JQuery... – Louis Maddox Apr 30 '14 at 15:20
@immx See the first line of the answer, and subsequent justification. – SW4 Apr 30 '14 at 15:22

Smooth scrolling with just pure css

2 Answers2

Demo Fiddle

Linked