jQuery Plugin ScrollTo

[Stiwano]

Hat schon mal jemand das jQuery Plugin ScrollTo verwendet / eingebaut? Man sieht so was ja immer öfter und mir gefällt das sehr gut.

http://flesler.blogspot.de/2007/10/jqueryscrollto.html
http://demos.flesler.com/jquery/scrollTo/

Für Hinweise, Tipps und dergleichen wäre ich dankbar.

Gruß
Stiwano

[tomsky]

hier mal ne demo für mootools:
http://davidwalsh.name/mootools-scrollspy

gruß
tomsky

[overHead]

Hallo Leute,

ich hab folgendes Problem,

ich hab die scrollTo-funktion und die klappt auch sehr gut, wenn in einem dem ganz normalen HTML Bereich auf den Link zum Anker klicke.
Nun hab ich aber ein HTML 5 animation die mit der click Funktion window.location= '#Ankername'; ausgeführt wird und wenn ich da rauf klicke scrollt das nicht so schön wie ich will sondern springt einfach nur.

Würde mich über eine Lösung freuen, irgendwo muss da bestimmt nur was reingeschrieben werden dann funzt das auch.

Ich benutze die Jquery Scrollto und das localscroll von jquery also nichts selbst geschriebenes.


Danke

[halofei]

Bin auch gerade dabei, dieses Plugin zu integrieren.

Leider bin ich nicht der jQuery Kenner, daher meine Frage, wie binde ich das Ganze ein und wo genau nehme ich die Änderungen (how to specify) vor?

[overHead]

Hey
du kannst auch die "onepagewebsite" Erweiterung benutzen da ist alles drin und du brauchst nichts irgendwo hin kopieren

[halofei]

Danke dir für den Tipp.
Wenn ich die Beschreibung des Moduls richtig verstehe, bezieht sich aber auf Navigations-Elemente. Bei mir geht allerdings um einen einzelnen Link mitten auf der Seite.
Würde auch eher das von mir angesprochene Script bevorzugen, als gleich eine ganze Erweiterung für die einmalige Sache zu installieren.

[tl_richard_user]

Du bindest jQuery ganz einfach das Layout ein (Contao 3) und bindest zusätzlich scrollTo ein.

<script src="files/jquery.scrollTo.min.js"></script>

In der README findest du auch schon Hinweise zur Benutzung.
Du kannst zu Pixelangaben und Ankern verlinken.

Bei Verlinkungen kann man nun sagen:

<a id ="asdf" href="#foo" oncklick="$.scrollTo('#foo', 1500);">

1500 ist dabei die Zeit.

Wenn es geht, solltest du aber einen Event-Handler (anstatt onclick) verwenden. Also

<script>
$('#asdf').click(function ()
{
	$.scrollTo('#foo', 1500);
}
</script>

[halofei]

Danke erstmal bis hierhin.
Funktioniert aber noch nicht richtig. Er springt zwar zum Ziel (#container), aber er "slidet" nicht.

Hier mal die Seite um die es geht Link

Im Quelltext sieht man, wie ich die Verlinkung (Jetzt Abtauchen) gemacht habe. Solange es nur "springt", funktioniert es noch nicht ...

[overHead]

So ich bei mir nochmal geschaut. also es gibt auch eine Erweiterung die schimpft sich "jquery-smooth-scroll" die musst du dann nur im Layout aktivieren und dann einen Link mit einem inserttag anlegen

[halofei]

Wie sähe dann der Link konrket aus? Im Grunde is es ja eine URL mit einem Anker (zu einem DIV) hinten dran.

[tl_richard_user]

Habe mich gerade totgesucht, wo der Fehler liegt
1. Es heißt onclick="" und nicht oncklick=""
2. Gibt es Probleme mit Mootools; also wenn Mootools und jQuery gleichzeitig laufen.

[halofei]

Stimmt, das war der Fehler. Hatte es (aber eben falsch) von deinem Kommentar kopiert.
Und nein, Problem zwischen den beiden gibt's nicht.

Danke für die Hilfe!

[halofei]

Shit, obwohl ich nix geändert hab, jetzt springt er wieder nur ...

Edit: Interessant, offenbar funktioniert die Verlinkung mit der von overHead genannten Erweiterung, aber nicht mit dem eigentlichen Script.

[tl_richard_user]

Ich glaube nach wie vor, dass es Komplikationen mit anderen Skripts gibt

[halofei]

Habe es nun mal nur mit jQuery probiert, aber das selbe Ergebnis, er springt nur.

[overHead]

Hallo,

so ich hab mal alles nachgeprüft.
also bei dem Artikelelement "Link" musst du dann als Link Adresse folgendes eingeben: {{env::request}}#deinAnker
Aber auch im Layout bei j-Query das smooth-scroll mit aktivieren.

also ich benutze übrigens Version 3.1.x

[halofei]

Es geht mit der Erweiterung, es reicht auch aus, wenn man nur den Anker angibt.
Hätte aber auch ganz gern gewusst, wie es "nur" mit dem Script geht...vllt bekomme ich es noch raus.

[wernergraser]

Hai,
also bei mir funzt das Script für den Einsatz einer One-Pagelösung leider nicht (die One-Page-Ext verwendei ch nicht)… Und es ist das einzige Script welches geladen wird. Ich definiere meine #Anker (den Inserttag macht dann Contao) und Stille… Also nicht ganz: Egal auf welchen Anker-Link ich klicke, der Browser "läuft" nach oben… dann Stille. Schalt ich mein scrollTo wieder aus funkt alles wieder wie gehabt und der Browser springt an die richtigen Stellen. Hatte jemand schon ein Ähnliches Problem mit dieser Ext? (C-Vers: 3.1.2)
Danke im voraus & sonnige Grüße,
Werner

[AndreasC]

Habs am laufen und geht wunderbar im Webbrowser, nur auf dem iPad noch relativ hakelig.
Ein Link zu deiner Seite würde nicht schaden.

gruß

[wernergraser]

Habs am laufen und geht wunderbar im Webbrowser, nur auf dem iPad noch relativ hakelig.
Ein Link zu deiner Seite würde nicht schaden.

gruß

hi AndreasC,
deine Antwort hat mir zwar nicht wirklich weitergeholfen, jedoch trotzdem Danke
Hab die letzte Stunde damit verbracht das Script ein wenig zu verkürzen… jQuery lade ich ja… aus dem Grund denke ich das es mit einer Funktion geht…

function scrollitto(element){
$('html, body').animate({ scrollTop: ($(element).offset().top)}, 'slow');
};

dann setzte ich meinen Link und stoße Script an… und das scrollt dann zum Element mit der Klasse…

<a title="Kontakt" href="javascript:scrollitto('.kontakt_anker');">Kontakt</a>

grusl, W