Scroll-To beim Seitenaufruf - Wie realisieren???

[Tomahawk]

Hallo zusammen,

ich möchte auf meiner Seite etwas spezielles haben, aber ich weiß nicht, wie man das umsetzt...
Ich habe ein großes Header-Bild auf jeder Seite.

Ich möchte jetzt, dass beim Seitenaufruf automatisch bis zu einer gewissen Position gescrollt wird. z.b: 30-Prozent Höhe des Header-Bildes
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; }

Ich hab' schon einiges probiert, aber ich komme mit der JS-Syntax nicht zurecht.

Hier ist der aktuelle Stand:

Smooth Scroll - jsFiddle


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. 60%. (... der Größe des Headers)

Ziel ist es, dass beim Aufruf des "JSFIDDLE" so gescrollt wird, dass die Seite beim Ellebogen der Frau beginnt. - Und zwar egal wie groß/klein das Fenster ist.

Hier wird die Scrollto-Funktion beschrieben: Ariel Flesler: jQuery.ScrollTo
Hier gibts ein Demo: jQuery.ScrollTo

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

Vielen Dank

 

[Cheffchen]

Hallo,

hast doch fast alles, das einzige was fehlt ist höhe head für deine 60% zu berechnen.

Smooth Scroll - jsFiddle


Cheffchen

 

[Tomahawk]

Hallo,

Oh Gott - Viel zu weit entfernt soo kurz vorm Ziel...
Es funktioniert! Ich bin dir wirklich SEHR DANKBAR! ;Jump
Diese eine Zeile hat mich viel Zeit gekostet.

Wenn ich mir noch eine Frage erlauben darf:
Bei Smartphones im Hochformat (@media only screen and (max-width:480px)) soll dieses Skript nicht aktiv sein.
Da möchte ich die ScrollTo-Funktion nicht haben.

Kann ich das auch irgendwie realisieren?
IF-Abfrage im Script?

Vielen Dank!

 

[Cheffchen]

hallö,
so eine richtige abfrage in jquery gibts glaube nur in der Mobil Version, brauchst aber nicht.
hast jetzt wie Höhe bekommst, das jetzt bloss mit windows anstelle der id und das gleiche für die breite mit width und dann einfach prüfen was grösser ist.
daraus machst dann eine if abfrage und fertig.

bin Mobil deswegen ohne weitere links :-)

cheffchen

 

[Tomahawk]

Hallo,

ich denke ich konnte diese Herausforderung meistern.
Hier der Code:

if (screen.width > screen.height){
    window.scrollTo(0,$("#header").offset().top+( $("#header").height()/100*60 ));
}

Muß es zwar noch etwas testen, aber es scheint zu funktionieren...:-)

Schöne Grüße!