Autor |
Nachricht |
guuls
Threadersteller
Dabei seit: 03.09.2008
Ort: Mainhausen
Alter: 33
Geschlecht:
|
Verfasst Do 11.02.2010 20:59
Titel dynamischer scroll von anker zu anker |
|
|
Hallo,
ich möchte gerne 2 pfeile auf meiner Seite erstellen die immer an einer bestimmten position sitzen und dynamisch von einem zum anderen anker sprint...
das heist mein html sieht ungefähr so aus:
Code: |
<a name="01">Titel01</a>
<a name="02">Titel02</a>
<a name="03">Titel03</a>
<a name="04">Titel04</a>
|
und jetzt soll man wenn man auf den pfeil klickt immer einen <a> weiter gehen bzw. zurück gehen...
könnt ihr mir helfen den passen js zu schreiben????
|
|
|
|
|
easteregg
Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst Do 11.02.2010 21:58
Titel
|
|
|
Wenn du weißt, wie der jeweils nächste Anker heißt (also die ID kennst), kann man das auch ohne Javascript umsetzen.
Code: | <a href="#anker2" id="anker1">Zu Anker 2</a>
<a href="#anker3" id="anker2">Zu Anker 3</a>
<a href="#anker4" id="anker3">Zu Anker 4</a>
<a href="#anker1" id="anker4">Zu Anker 1</a> |
Wenn du das nicht weiß, erkläre mal bitte, welche Infos du hast. Ist es sicher, dass zwischen den Links, zwischen denen du springst, keine weiteren stehen?
|
|
|
|
|
Anzeige
|
|
|
guuls
Threadersteller
Dabei seit: 03.09.2008
Ort: Mainhausen
Alter: 33
Geschlecht:
|
Verfasst Do 11.02.2010 22:03
Titel
|
|
|
Ja das ganze soll ja aber dynamsich scrollen und nicht einfach hinspringen!
Also ich kenne die ID´s und dazwischen ligt noch fließtext indem auch links sein können die aber keine id haben.
|
|
|
|
|
easteregg
Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst Do 11.02.2010 22:06
Titel
|
|
|
Dynamisch scrollen? Du meinst bestimmt animiert, smooth, schön mit Javascript...
jQuery plus das Plugin ScrollTo.
|
|
|
|
|
guuls
Threadersteller
Dabei seit: 03.09.2008
Ort: Mainhausen
Alter: 33
Geschlecht:
|
Verfasst Do 11.02.2010 22:08
Titel
|
|
|
ja genau sowas meine ich
|
|
|
|
|
easteregg
Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst Do 11.02.2010 22:19
Titel
|
|
|
Wie bereits gesagt:
jQuery plus das Plugin ScrollTo.
Das baust du beides bei dir ein. Dann gibst du dem Link, zu dem du "fliegend scrollen" willst eine eindeutige ID (doppelt gemoppelt, ich weiß...) und dem Link, bei dessen Klick man losfliegt, eine entsprechende Eigenschaft.
Z.B. Code: | <a title="$.scrollTo( '#target-examples', 800, {easing:'elasout'} );" href="#target-examples"> |
In dem Beispielfall würde der Klick den User dann zu dem Abschnitt mit der ID "target-examples" fliegen lassen. Mehr, zu Einstellmöglichkeiten etc, erfährst du auf der Plugin-Seite.
Edit: Ups, in der Zwischenzeit hast du / wurde dein Beitrag, auf den ich mich bezog, gelöscht.
Zuletzt bearbeitet von easteregg am Do 11.02.2010 22:20, insgesamt 1-mal bearbeitet
|
|
|
|
|
guuls
Threadersteller
Dabei seit: 03.09.2008
Ort: Mainhausen
Alter: 33
Geschlecht:
|
Verfasst Do 11.02.2010 22:59
Titel
|
|
|
Das funktioniert schon super!
Aber wie kann ich da jetzt noch die die Zeit einstllen?
Und vorallem wie mache ich das jetzt das man über das icon "up" nach oben scrollen kann?
Und was noch wichtiger ist wie mache ich das er von id zu id scrollt?
Zuletzt bearbeitet von guuls am Do 11.02.2010 23:00, insgesamt 1-mal bearbeitet
|
|
|
|
|
easteregg
Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst Do 11.02.2010 23:03
Titel
|
|
|
guuls hat geschrieben: | Das funktioniert schon super!
Aber wie kann ich da jetzt noch die die Zeit einstllen?
Und vorallem wie mache ich das jetzt das man über das icon "up" nach oben scrollen kann? |
Der Wert 800 aus meinem Code-Beispiel müsste für die Zeit stehen (die vergeht, bis man an der Scrollposition ankommt). Der Wert durch 1000 geteilt ergibt die Sekunden, in dem Fall 0,8. Wenn du jetzt 5 Sekunden (als Beispiel) nehmen möchtest, wäre der Wert folgerichtig 5000.
Nach oben scrollen kannst du z.B., indem du dein erstes HTML-Element mit der ID "top" benennst. Dann wäre der Anker #top der, mit dem du nach oben scrollst.
Edit: Für ID zu ID - schau dir mal diese Demo-Beispiele an. Ich habe selber ScrollTo noch nie eingesetzt, daher lese ich mich da jetzt nicht für ein
Zuletzt bearbeitet von easteregg am Do 11.02.2010 23:04, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
PDF-Anker?
Probleme mit Anker
Anker- Problem im IE6 und IE7
Anker-Markierungen
anker in ein div container setzen?
Anker in HTML-Newsletter
|
|