Scroll-To beim Seitenaufruf - Wie realisieren???

Hallo zusammen,

ich möchte auf meiner Seite etwas spezielles haben, aber ich weiß nicht, wie man das umsetzt...

Ich habe ein sehr großes Header-Bild auf jeder Seite. Damit man sich etwas darunter vorstellen kann - Hier habe ich eine Skizze erstellt:

Ich möchte jetzt, dass beim Seitenaufruf automatisch bis zu einer gewissen Position gescrollt wird. Auf der Skizze habe ich die Position mal auf 30-Prozent Höhe des Header-Bildes gesetzt.
Es kommt hinzu, dass meine Seite Voll-Responsive ist. Dabei wird auch die Breite+Höhe des Headers automatisch an die Auflösung des Endgerätes angepasst/skaliert:

img {
    max-width: 100%;
    height: auto;
}

Dies führt dazu, dass ich nicht sagen kann - "Scroll 200px nach unten" - da ja die Höhe des Bildes variiert.

Ich denke mein Anliegen sollte soweit klar sein. Trotzdem habe ich noch ein Mock-Up erstellt, wie ich mir das vorstelle:

Ich denke, dass das mit Javascript realisiert wird, aber ich habe noch nicht viel Erfahrung damit.
Ich meine, dass auf Facebook eine solche Technik benutzt wird. Da ist, wenn man eine Profilseite aufruft, ja auch nicht das komplette Profilbanner sichtbar, sondern nur der untere Teil.

Vielleicht kann mir jemand schildern, wie ich das umsetzen kann. Gegebenenfalls reichen mir auch ein paar Schlagworte für die Suchmaschine bzw. ein Anstoß, damit ich mir das selbst zusammensuchen kann.

Vielen Dank im Voraus!

Hallo,

Vielen Dank für deine Antwort. Irgendwie dachte ich auch an Prozentangaben beim scrollto.
Ich bekomme es nicht hin.
Ich habe bei "jsfiddle" ein kleines Beispiel erstellt.
Kannst du oder irgendjemand mir anhand des Beispiels zeigen wie das funktioniert?

[size=14]http://jsfiddle.net/tomahawx/MMgXu/161/[/SIZE]

Ziel ist es, das die Seite beim Laden auf Höhe des Ellebogens der Frau im Header beginnt. Egal welche Größe das Fenster hat.

Vielen Dank und schöne Grüße!

Hallo nochmal,

kann mir da niemand helfen? Wäre mir wirklich wichtig.
Ich hab' wieder weiter probiert, aber ich komme mit der JS-Syntax nicht zurecht.

Hier ist der aktuelle Stand
[size=14]http://jsfiddle.net/MMgXu/200/[/SIZE]

Ich habe folgende Codezeile:

$(document).ready(function() {
window.scrollTo(0,$("#header").offset().top+230);
});

Beim Seitenaufruf wird zum #header + 230 Pixel gescrollt.
Es wäre toll wenn es nicht 230px wären, sondern z.B. 70%. (... der Größe des Headers)

Hier wird die Scrollto-Funktion beschrieben: http://flesler.blogspot.co.at/2007/10/jqueryscrollto.html
Hier gibts ein Demo: http://demos.flesler.com/jquery/scrollTo/

Hab' schon anhand dessen probiert, aber ohne JS-Kenntnisse geht nix. :-(

Vielen Dank