ScrollTo How to?

[Auf der Mauer]

Hallo Experten,

meine Frage betrifft ein Javascript mit dem Namen "scrollto.js."
Es stammt von dieser Internetseite. http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Es sollen bei einer Webseite Ankerpunkte mithilfe dieses Skripts langsam gleitend angesteuert werden. Natürlich funktionieren die Anker auch ohne Javascript, nur sieht es dann nicht so nett aus. Um es vorweg zu sagen, der Scrolleffekt klappt, aber die Umsetzung ist fraglich.

Zum Aufbau:

Die beiden Javascriptdateien habe ich im Headbereich der Seite eingebunden.

<script type='text/javascript' src='javascripts/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='javascripts/jquery.scrollTo-min.js'></script>

Die Anker auf der Seite sehen so aus.

<a name="Ankername" id="1"></a>
<a name="Ankername2" id="2"></a>
...

Die Links zu den Ankerpunkten sehen so aus.

<a id="1" href="#Ankername"> Link1 </a>
<a id="2" href="#Ankername2"> Link2 </a>
...

Über ein 3. Skript habe ich jetzt die Sprungmarken gesetzt wo genau hingesprungen werden soll. Das sieht so aus.

$(document).ready(function(){ 
   
   $('#1').click(function(){ 
     $(document).scrollTo( {top:'320px', left:'0px'}, 2000 ); 
   });
   
   $('#2').click(function(){ 
     $(document).scrollTo( {top:'520px', left:'0px'}, 2000 ); 
   });
   
});

So funktioniert zwar der Scrolleffekt, aber irgendwie scheint das nicht im Sinne des Erfinders zu sein, denn es gibt dabei mindestens 2 Probleme.

1. Der Inhalt der Seite kann nicht geändert oder auch dynamisch generiert werden, ohne dass die Sprungmarken neu angepasst werden müssen.

2. Bei älteren IE Versionen (wahrscheinlich auch andere Browser) sind 1000 px von oben nicht 1000 px von oben. Der Sprung geleitet den Besucher mitten in einen Text. Bei modernen Browsern funktioniert es einwandfrei.

Wie bekomme ich es jetzt hin, dass ich überhaupt keine Sprungmarken angeben muss, und die Besucher direkt auf den Anker mit diesem Slideeffekt springen können?
So wäre es dann auch egal, wie breit bzw. hoch ein Thema vielleicht mal sein wird.

Bin für alle Tipps dankbar.

Gruß
René

[vt1816]

Zitat von Auf der Mauer

Hallo Experten,

meine Frage betrifft ein Javascript mit dem Namen "scrollto.js."
Es stammt von dieser Internetseite. http://flesler.blogspot.com/2007/10/jqueryscrollto.html

[...]

Muss hierbei auf unsere Forenregeln Punkt C verweisen.

[Auf der Mauer]

Hallo vt1816,

muss hier auf den Unterpunkt C 4 verweisen, ich brauche Hilfe aus dem Forum.
Den Autor zu fragen macht keinen Sinn, da sein Script sicherlich richtig funktioniert.
Google habe ich auch schon mehrfach bemüht und komme einfach nicht mehr weiter.

Die Javaskripte mit Slideeffekt sind alle ähnlich aufgebaut, aber dass sie meine gesetzten Anker automatisch anspringen funktioniert bei mir einfach nicht und ich weiß nicht wieso. Habe jetzt einige Tutorials durchgearbeitet aber irgendetwas existenziell wichtiges muss ich immer übersehen.

Gruß
René

[cortex]

hm... wird die vorgehensweise denn nicht ausführlich beschrieben?

There are many different ways to specify the target position.
These are:

* A raw number
* A string('44', '100px', '+=30px', etc )
* A DOM element (logically, child of the scrollable element)
* A selector, that will be relative to the scrollable element
* The string 'max' to scroll to the end.
* A string specifying a percentage to scroll to that part of the container (f.e: 50% goes to to the middle).
* A hash { top:x, left:y }, x and y can be any kind of number/string like above.

du arbeitest mit fixen werten... so what?

cx

[Auf der Mauer]

Hallo Cortex,

ich gehe die Beschreibungen auf der Seite immer wieder durch und bekomme es doch nicht hin. Anscheinend habe ich immer etwas sehr wichtiges vergessen oder falsch gemacht.

Da steht ich soll die Dateien einbinden. http://flesler.blogspot.com/2007/10/...scroll-10.html

<script type='text/javascript' src='javascripts/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='javascripts/jquery.scrollTo-min.js'></script>
<script type='text/javascript' src='javascripts/jquery.localscroll.js'></script>

Dann soll ich die Anker auf der Seite setzen. Das habe ich so gemacht.

<a name="ankername1" id="1">#</a>
<a name="ankername2" id="2">#</a>
...

Dann kommen die Links zu den Ankern.

<a id="1" href="#ankername1">Link1</a>
<a id="2" href="#ankername2">Link2</a>
...

Bis hierhin konnte ich der Anleitung noch ganz gut folgen, aber beim letzten Schritt bin ich mir nicht sicher ob ich es richtig verstanden habe.

In meinem Hauptdiv befinden sich mehrere divs.

<div class="main" id="main">

   <div class="navi">                                                 <!-- Navigation -->
      <a id="1" href="#ankername1">Link1</a>
      <a id="2" href="#ankername2">Link2</a>
      <a id="3" href="#ankername3">Link3</a>
   </div>               

   <div class="content">                                             <!-- Inhalt 1 -->
      <a name="ankername1" id="1">#</a> 
   </div>
            
   <div class="content">                                             <!-- Inhalt 2 -->
      <a name="ankername2" id="2">#</a> 
   </div>
            
   <div class="content">                                             <!-- Inhalt 3 -->
      <a name="ankername3" id="3">#</a> 
   </div>             

</div>

<script type="text/javascript">

$(document).ready(function(){

  $('#main').localScroll();

});

</script>

Es geht so leider überhaupt nicht. Immerhin er springt bei ausgeschaltetem Javascript direkt zu den Ankern, das was für mich Vorrausetzung.

Gruß
René

[Auf der Mauer]

So es läuft. :-[

Die Lösung schon gefühlte 20 mal ausprobiert beim 21 mal klappt es.

Wie auf der Internetseite beschrieben:

$('#navi').localScroll();

Mist, ich hasse soetwas wenn man Stunden oder Tage mit sowas verplempert und am Ende war es ja doch ganz einfach.

Gruß
René

[vt1816]

Herzlichen Glückwunsch!

[Auf der Mauer]

Zitat von vt1816

Herzlichen Glückwunsch!

Mhh ja danke, freue mich ja jetzt auch aber die WUT. ;-)

Gruß
René