mit java script zu div springen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abzug
anker
ankern
bekommen
bleiben
browser
code
dateiname
eigene datei
folgendes problem
gulden
header
http
liste
position
punkt
richtig code
springen
teil
url
-
hi,
habe folgendes problem:
ich habe rechts eine liste mit links, die wenn man draufklickt zu einem div scrollen/springen sollen. (je nach dem auf welchen link man klickt, soll auf das dazugehörige div gescrollt/gesprungen werden.
ich weiß, dass man das mit ankern machen könnte, aber da mein header eine größe von 45px hat, funktioniert das nicht so richtig. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
<div id="MyAnker">TEXT</div>
Und dann springen mit Javascript:
window.location.hash = "MyAnker";
Liebe Grüße -
@ggamee
und wohin schreib ich den java script? eine eigene datei machen und i-wie verknüpfen oder wie?
@ploco
ja genau ich hab position fixed sodass er mitscrollt und das soll auch so bleiben :D
-
warum Javascript
du machst einfach vor dem DIV einen Anker-Punkt
<a name="divname"></a> <div id="divname"> ... </div>
und als Link einfach als Ziel #ankername
<a href="#divname">zum DIV springen</a>
dann "springt" der Browser zum Anker-Punkt
wenn der Anker-Punkt auf einer anderen Seite ist,
dann einfach vor das # die URL (Dateiname) zur Seite
<a href="information.php#ankername">zum Ankername</a>
ist doch so viel einfacher, da braucht es doch kein JavaScript ?!
Wenn es ein etwas smooth scrollen sein soll, und nicht ein direkter Sprung
dazu gibt es dann doch JavaScripte .. BSP: http://www.kryogenix.org/code/browser/smoothscroll/
oder jQuery plus das Plugin ScrollTo oder bestimmt noch andere Möglichkeiten
-
@sportinfo
nein das mit dem ankerpunkt hatte ich schon, aber da der header 45px hat springt der immer um 45px wo anders hin...
deshalb mit java script -
Porbier's mal mit:
<a href="javascript:window.scrollTo(0,document.getElementById('featured').offsetTop)-45;">
(Davon ausgehend, dass das Zielelement die ID "featured" hat.)
Beitrag zuletzt geändert: 29.6.2012 1:58:47 von kuschku -
kuschku schrieb:
Porbier's mal mit:
<a href="javascript:window.scrollTo(0,document.getElementById('featured').offsetTop)-45;">
(Davon ausgehend, dass das Zielelement die ID "featured" hat.)
da kommt bei mir eine leere seite auf der steht: NaN
-
<a href="javascript:window.scrollTo(0,document.getElementById('featured').offsetTop-45);">
So müsste es gehen.
Liebe Grüße -
habe zuerst hier geschriebn das das falsch war.
aber ich habs nur falsch verstanden. deshalb hab ich den beitrag löschen lassen und 7 gulden abzug bekommen :D
so also ich habs so gemacht (falsch):
<a href="javascript:window.scrollTo(0,document.getElementById('#div_id').offsetTop-45);">
und so sollte es sein (richtig):
<a href="javascript:window.scrollTo(0,document.getElementById('div_id').offsetTop-45);">
OHNE DAS ID-ZEICHEN EINGEBEN!
Beitrag zuletzt geändert: 5.7.2012 17:15:13 von ultimativecharts -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
