Scrollen Sie mit jQuery / Javascript eine volle Seitenhöhe nach oben oder unten

8

Ich arbeite gerade an einer Site, die etwas ähnliches in Bezug auf Scrollfunktionalität benötigt: Ссылка

Mitten in dieser Frage habe ich einen Teil der Seite hochgeladen - Ссылка

Ich habe den Code der Site durchgesehen und natürlich, wie ich hätte vermuten sollen, leer ausgegangen. Ich bin auf der Suche nach einer Möglichkeit, ganzseitige divs (mit Hintergrundbildern) zu haben, durch die gescrollt werden kann, und das Scrollen zum nächsten div erfolgt mit der Maus nach oben / unten.

Ich habe die dynamischen Ganzseiten-divs bearbeitet, ich hatte fast sogar die Scrollfunktion, aber es funktioniert einfach nicht so wie ich es erwartet hatte und ich habe schon ein paar Tage damit verbracht.

HTML:

%Vor%

CSS:

%Vor%

Jquery:

%Vor%

Ich benutze das scrollTo-Plugin von Flesler (habe immer noch nicht den Rep, um mehr als 2 Links zu posten)

Was gut funktioniert, aber ich muss erst noch einen Weg finden, wie ich ganz nach Belieben scrollen kann. Mit dem, was ich da oben habe, wenn Sie (wie viele Benutzer) das Scrollrad spammen, um nach oben / unten zu gehen, bin ich ziemlich sicher, dass die WheelDelta-Zählung durcheinander gebracht wird und nicht richtig funktionieren kann.

>

Ich habe praktisch jeden Link auf den ersten zehn Seiten von Google ausprobiert, der sich auf Scrollen nach oben und unten als Funktionen bezieht, sowie die meisten Fragen auf S.O. das sind relativ.

Mein Hauptziel ist die Scroll-Funktionalität, danke im Voraus.

    
XstiX 23.09.2013, 07:16
quelle

4 Antworten

30

Nachdem Sie eine Seite wie die Ihre programmiert haben, habe ich ein einfaches Plugin für diese Art von Websites fullPage.js ( Blog-Artikel )

Es ist in seiner ersten Version. Ich werde es weiter verbessern, so weit ich kann. Das Hinzufügen einer Methode, die aus einem Menü aufgerufen wird, wäre zum Beispiel schön. Sowie Verwendung von Hashtag (#) für jeden Abschnitt und so weiter. Dies sollte bald geschehen, da ich es auf meiner Seite verwende.

Weitere Informationen zur Verwendung finden Sie im my github-Konto

Lebende Demo: Ссылка

Arbeiten in: (IE 8, Chrome, Firefox, Opera & gt; 11, Safari, Touch-Geräte)

Ich hoffe, es hilft!

    
Alvaro 25.09.2013, 15:54
quelle
7

Probieren Sie dieses Skript

aus %Vor%

FIDDLE DEMO

Vollbild-Demo

    
Vaibs_Cool 23.09.2013 07:24
quelle
3

Ich habe mit einer Lösung für ein ähnliches Problem herumgespielt.

All meine Lösung ist zu überwachen, wenn das Fenster scrollt.

%Vor%

Wenn es um mehr als 50 Pixel über das Ende der "Seite" scrollt, animiert jquery das Scrollen zur nächsten "Seite".

%Vor%

Dasselbe gilt für das Hochscrollen. Dies umfasst Scrollen mit der Maus, Tastatur oder Javascript.

Sehen Sie sich den vollständigen Code unter Ссылка

an

Vielleicht wird es jemandem von Nutzen sein (lassen Sie mich wissen, ob es das ist oder nicht).

    
Paul Gorton 10.12.2013 01:38
quelle
-1

Stellen Sie sicher, dass Sie keine Höhe: 100% oder Höhe: 100vh auf dem Körper haben. Ich hatte genau dieses Problem und das einzige, was es behoben hat, war das Entfernen.

    
user3880247 09.07.2016 17:29
quelle

Tags und Links