Anker Scrollen

[Machacker]

Hallo Zusammen,

Ich bin ein ziemlicher Anfänger, was JavaScript anbelangt, trotzdem würde ich gerne einen Anker verlinken und zu diesem mit einem scroll-Effekt kommen. Ich habe im Internet viel recherchiert und die einfachste Methode, welche ich gefunden habe ist DIESE.

Doch dieser Code hat einen Schönheitsfehler, welchen ich unbedingt raushaben will. Das Problem ist nämlich, dass wen man normalerweise einen Anker verlinkt kommt in der URL etwas derartiges raus:

.../index.html#Anker

doch bei diesem Code klickt man auf den Link zum Anker, es scrollt zum Anker, aber die URL ist dann immer noch:

.../index.html

Wie kann ich das Problem lösen?

Vielen Dank schon im Voraus :)

P.S. Mir ist noch ein Problem aufgefallen: Ich habe eine Seite mit 3 Beiträgen, welche Horizontal angeordnet sind (Stellt es euch als eine Art Slideshow vor). Nun wenn ich beim ersten bin und auf der Nach links gehe (also auf den letzten Beitrag), dann scrollt es komplett nach rechts, was erstens nicht schön aussieht, und zweitens verwirrend ist.

Nun auch hierzu meine Frage:

Wie kann ich das Problem lösen?

 

[Tronjer]

Wie kann ich das Problem lösen?

In dem du den Anker an die URL anhängst. Die Methode dafür heißt location.hash.

Genau wie HTML ist JavaScript nichts, was man nur kopiert ohne es zu verstehen, sondern man muss es lernen und selber schreiben können. Am besten fängst du mit jQuery an. Das ist nicht nur leichter verständlich, sondern bringt auch von Hause aus viel mehr Funktionen mit. Unter anderem animate().

Ich zeige dir nachfolgend, wie sich so etwas umsetzen lässt. Aber bevor du weitere Fragen stellst, eigne dir erst die Grundlagen von jQuery an. Sonst verstehst du die Antworten nicht, und Hilfe beim Coden setzt immer einen eigenen Ansatz des TE voraus. Zumindest bei mir. ;)

Also angenommen es gäbe zwei Container in HTML:

<article
  <section id="chapterOne">
    <p><a href="#chapterTwo">Zu Kapitel 2</a></p>
    <p>Viel Text ....</p>
  </section>
  <section id="chapterTwo">
    <p><a href="#chapterOne">Zu Kapitel 1</a></p>
    <p>Viel Text ....</p>
  </section>
</article>

Dann wird beim Klick auf einen der Hyperlinks dessen href in der Variablen target gespeichert und die Methode animate() aufgerufen. Innerhalb animate() wird nun mit scrollTop zum entsprechenden Link gescrollt und dieser anschließend an die URL gehängt. Die 1000 steht hier für eine Dauer von 1s.

$('a[href*=#]').click(function() {
  target = $(this).attr('href');
  $('html').animate({
    scrollTop: $(target).offset().top
  }, 1000, function (){location.hash = target;});
});

 

[Machacker]

Vielen Dank für die Antwort.
Ich werde mich wohl oder übel mit JavaScript befassen müssen, obwohl ich das eigentlich vermeiden wollte. Doch es gibt wohl keinen anderen Weg :)

 

[Tronjer]

Denk dran: jQuery. Pures JavaScript hat nur heutzutage noch eine Berechtigung, wenn es um Design Patterns und wartbaren Code geht, und selbst dort werden zunehmend Frameworks eingesetzt. Alles, was in Einsteiger-Tutorials an prozeduraler JS Programmierung gelehrt wird, ist mittlerweile so veraltet wie Tabellenlayout und Frames in HTML.