CSS scrolling working example, but not when implemented

[rbfmnpwr]

Hi, Yeah… Me again. Sorry to bother you again :-P

Losing my common sense here. I am having troubles implementing the example, and I just can’t see what the difference is between that and my own page.

I am fairly positive, that it is because I just lack the knowledge to do so.

Example:
https://codepen.io/anon/pen/JRVGvV

My page:
https://codepen.io/anon/pen/amAYEp

As you can see in the example, the page is scrolling to an anchor (?) upon activation. I tried to dublicate this effect on my own site. But something is wrong, and I just cant see what the problem is. The scrolling is simple not there.

[Shikkediel]

It is because this selector doesn’t match:

a[ id= "home" ]:target ~ #contentDiv div.content {

Where #contentDiv is referred to as the sibling (~) but it isn’t, the element #masterDiv is.

[rbfmnpwr]

Aaah, I see….

So I should change the ~ into a > or just a space?

[Shikkediel]

You’ll still need the ~ selector, I think easiest would be to just substitute #contentDiv for #masterDiv.

a[ id= "home" ]:target ~ #masterDiv div.content {

[Shikkediel]

Have a look at this by the way, it’ll make the translate responsive and you won’t have to calculate and change any fixed sizes:

Demo

a[id="home"]:target ~ #masterDiv div.content {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

a[id="about"]:target ~ #masterDiv div.content {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

a[id="background"]:target ~ #masterDiv div.content {
  -webkit-transform: translateY(-200%);
  transform: translateY(-200%);
}

...

[rbfmnpwr]

I love this forum! Thanks!

[Author]

Posts