div overflow-horizontal und scroll zu ankerpunkt

R

rog2007

Grünschnabel
Hallo Leute.

Ich möchte gern bei einem kleinen Projekt eine Scrollfunktion realisieren die beim Klick auf einen Button ausgelöst wird.

Grundgerüst sieht wie folgt aus:

Code: 
<div id="main" style="overflow: auto; width: 3000px">

<a href="#1"></a><table></table>
<a href="#2"></a><table></table>
<a href="#3"></a><table></table>

</div>

Man erkennt das der scrollbalken horizontal im div feld erscheint. Die Website wird also nach links und rechts gescrollt.

nun möchte ich bei den einzelnen tables einen ankerpunkt nennen zu denen mit
window.scroll() hingescrollt wird beim klicken eines buttons.

aber wie kann ich dem Browser vermitteln das er nur in dem div-feld bis zu dem ankerpunkt scrollen soll

Kann mir jemand einen Tipp geben?

lg, rog
 
rog2007 hat gesagt.:
Man erkennt das der scrollbalken horizontal im div feld erscheint.
Zum Vergrößern anklicken....

Ich erkenne, dass der Scrollbalken im Browser erscheint, und zwar fürs gesamte Fenster und nicht fürs <div>,...weil Selbiges 3000px breit ist und ich keinen Monitor mit 2m Breite hab :suspekt:

Wenn du wirklich dafür sorgst, dass das <div> und nicht das ganze Fenster zu Scrollen ist, dann brauchst du kein JS sondern kannst per Link zu dem Anker springen:
Code: 
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
#main{width:30%;overflow:auto;border:1px dotted #000;}
#main div{width:3000px;text-align:right;height:50px;}
-->
</style>
</head>
<body>
<center>
  <a href="#anker">Zum Anker</a>
  <div id="main" >
    <div>
      <a name="anker">Hier ist der Anker</a>
    </div>
  </div>
</center>
</body>
</html>
 
Dann musst du(ausgehend von der Knotenstruktur in meinem Beispiel) in Intervallen die scrollLeft-Eigenschaft des div#main so lange erhöhen bis sie identisch ist mit dem Links-Wert der Position des Ankers innerhalb dieses divs.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück