scroll down to a specific div with pure css?

Question

I've been searching for this for quite a long time: I want the users to scroll down immediately on the page, so that the header image is hidden (because of the scroll down). The reason being too small displays. It should however be visible on the front page, as well if you scroll up too much, to be some kind of a goodie.

Currently i'm using anchored links on all of the subpages, like contact/#menu. But that does neither look good, nor is it SEO friendly.

Is there some way to scroll down with pure css? I don't wanna use js if not neccessary (though I would know how to do it that way).

Margin and padding on body or html won't help me there I'm afraid.

The website I'm talking about btw is http://www.poessnitzberg.at/kontakt/#menu

Thanks!

Answer 1

Let me start off by giving you an easy jQuery way of doing it:

$('html, body').animate({
    scrollTop: $("#menu").offset().top
},1000);

You could combine this with $(window).load or $(document).ready to immediately fire once the page loads or the document is ready.

As for pure CSS, I do not know of any really viable ways. If there are, I think they'd be more complicated then using this piece of jQuery.