Anker Links (Inhaltsverzeichnis) wie beim Anker Link Top im Shop

[woeppel]

Wie bei den meisten Produktlistings sind zuerst die Produkte aufgelistet und unten dann der "Seo" Content.
Der Content unten beinhaltet bei uns einen Ratgeber / oft gefragt hier beantwortet / usw.

Wir haben ja Kunden die sofort zu den Produkten gelangen möchten. Diese befriedigen wir so ja auch. Die zweite Kundengruppe will beraten werden und sollte daher schnell zum Content sprich Ratgeber & Co nach unten gelangen.

Deshalb möchten wir oben in den Produktlistings Anker Links einbauen. Aber entsprechend wie im Shop der Anker Link Top? Also über die Seite gleitend nach unten über die Produkte hinweg  zum Content. Somit bekommt der Kunde das Gefühl wie die Seite aufgebaut / strukturiert ist.

Bisher haben wir es als Beispiel klassisch so:

Code: PHP  [Auswählen]

a href="#Ratgeber">Ratgeber</a>
a href="#Fragen">Fragen</a>

Wie kann ich das umsetzen?

Grüsse
Markus

modified eCommerce Shopssoftware v2.0.4.2 rev 11374 dated: 2018-07-23
Bootstrap 3 von Karl

Linkback: https://www.modified-shop.org/forum/index.php?topic=40678.0

[hpzeller]

Hallo Markus

Nur mit CSS: In der Datei templates/bootstrap3/stylesheet.css folgende Regel einfügen.

Code: CSS  [Auswählen]

html {
  scroll-behavior: smooth;
}

Obiges funktioniert leider mit den Browsern IE, Edge und Safari nicht.
Nähere Infos -> https://www.w3schools.com/cssref/pr_scroll-behavior.asp

Oder mit jQuery: In der Datei templates/bootstrap3/javascript/general_bottom.js.php am Ende folgenden Code einfügen.

Code: Javascript  [Auswählen]

<script>
  $(function(){
    $('a').click(function(e){
        e.preventDefault();
        $('html, body').animate({
            scrollTop: $( $(this).attr('href') ).offset().top
        }, 900);
    });
  });
</script>

Nähere Infos -> https://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link

Gruss
Hanspeter

[woeppel]

@hpzeller

Wenn ich das Script in die general_bottom.js.php einfüge funktioniert im ganzen Shop kein Link mehr?

Grüsse
Markus

[hpzeller]

Sorry, teste folgenden Code.

Code: Javascript  [Auswählen]

<script>
  $(function(){
    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $(this).attr('href') ).offset().top
        }, 900);
        return false;
    });
  });
</script>

Gruss
Hanspeter

[woeppel]

@hpzeller
Mit jQuery umgesetzt.
Super.

Vielen Dank
Markus

[hpzeller]

Nachtrag:

Sorry, teste folgenden Code.

Code: Javascript  [Auswählen]

<script>
  $(function(){
    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $(this).attr('href') ).offset().top
        }, 900);
        return false;
    });
  });
</script>

Gruss
Hanspeter

Das return false; im Code, hat zur Folge das in Produktinfoseiten die Tabs nicht mehr funktionieren, also return false; bitte aus dem Code entfernen.

Gruss
Hanspeter

[woeppel]

Das return false im Script entfernt. Die Tabs in den Produktinfos funktionieren.

Grüsse
Markus