Anker auf Tab setzen

[3jojojo]

Einen wunderschönen guten MOrgen wünsche ich.

Seid gestern Abend bin ich am Überlegen wie man wohl einen Anker auf einen Tab setzt. Ich will zum Beispiel aus einer langen Beschreibung in einem Artikeltext auf einen tab verlinken oder von einer Kategoriebeschreibung auf ein zusätzliches <div> element mit Funktionsattribut. Kann mir jemand sagen wie ich hier am besten vorgehe?

Gruß
Jo

 

[3jojojo]

AW: Anker auf Tab setzen

<a href="#2schreibung_bottom" class="link_more" id="read_bottom">weiterlesen</a>


<div id="2schreibung_bottom" class="std"></div>

Damit habe ich es jetzt versucht aber ich lande immer wieder auf der startseite des Shops statt beim div. Kann mir jemand sagen wieso???

 

[FMoche]

AW: Anker auf Tab setzen

Ja - vgl. html - Make anchor links refer to the current page when using <base> - Stack Overflow

Durch das base-Tag werden auch Sprungmarken geändert.
Davon abgesehen ist übrigens auch deine ID nicht korrekt. Das Attribut darf nur mit Buchstaben beginnen (auch wenn die meisten Browser da wohl nicht weiter interessiert).

 

[3jojojo]

AW: Anker auf Tab setzen

danke für den Tip hat jetzt geklappt habe es noch etwas anders glöst und gut ist

 

[ongnamo]

Hallo FMoche,
ich habe mir Deinen Link angesehen. Da werden mehrere Ansätze beschrieben, meist mit Javascript oder jQuery. Kann ich alles nicht. Was kann ich konkret tun, damit die Sprungmarken funktionieren? Wo muss ich welchen Code einfügen?

Grüße
Thomas

 

[ongnamo]

habe jetzt die laienhafte und unelegante Methode gewählt: vor die Sprungmarke die URL der gleichen Seite gestellt und damit das base-Tag ausgebremst. Schön ist das wahrscheinlich nicht.
Beispiel: https://meine_url.de/service/#sprungmarke

 

[ag-websolutions.de]

Kann ich alles nicht.

Hallo Thomas,

wenn du selber Änderungen am Template vornehmen möchtest, dann kommst du aber um ein solides Grundwissen nicht herum ... ansonsten bleibt es bei ...

laienhafte und unelegante Methode

 

[ongnamo]

... leider keine sehr hilfreiche Antwort.

So rufe ich mal zum hohen Ross hinauf: Wie immer im Leben gibt es zwischen schwarz und weiß jede Menge Abstufungen, auch in Bezug von Template- und Programmier-Know-How. So gibt es durchaus Anwender, die vorgefertigte Codestrecken an passender Stelle einfügen können, so dass anschließend das Problem gelöst ist. Positive Beispiele solcher Anleitungen gibt es in diesem Forum durchaus.

 

[ag-websolutions.de]

die vorgefertigte Codestrecken an passender Stelle einfügen können,

Du so sollte das nicht klingen, aber in dem Link von Felix sind doch genau die, wie schreibst du ... vorgefertigten Codestrecken .. enthalten

 

[ongnamo]

das ist richtig, jedoch nicht nur eine, sondern ganz viele und dann ist nicht klar, wo das einzufügen ist.
Was ich damit sagen will: Ja, ich könnte jetzt mir einen Servicepartner suchen, für den das vermutlich ein Klacks ist und der mir das kostenpflichtig umsetzt. Wahrscheinlich würde ich trotzdem Wochen auf die Realisierung warten, da die meisten überlastet sind. Andererseits wäre es doch klasse (und das war ein wenig meine Hoffnung), wenn jemand schreiben könnnte: Nimm Code A - Z und füge den in Datei xyz an Stelle abc ein. Oder so ähnlich. Natürlich nur, wenn es tatsächlich so machbar ist.
Und es würde anderen Forumsmitgliedern auch helfen.

 

[FPrüfer]

Hallo,

ab der Shopversion 4.05 ist ein Smooth-Scrolling für Ankerlinks im Evo integriert, das auch ein ggfs. mitlaufendes Megamenü berücksichtigt.

 

[tresor-online]

Ich habe auch ein Problem mit einem Ankerlink, vielleicht kann mir da wer helfen.

Ich habe auf der Artikeldetailseite einen Link, bei einem Klick soll zu einem darunter liegenden Anker gescrollt werden.
Nun weiß ich schon, dass "normale" Anker aufgrund der Base URL nicht funktionieren.

Habe also folgenden Link eingebaut:

<a href="{$Artikel->cSeo}#konfiguration">
            hier klicken
        </a>
...
<div id="konfiguration"></div>

Es funktioniert auch, dass man bei Klick zum Anker springt, allerdings mit dem großen ABER, dass der Teil vor dem Anker dann nicht mehr angzeigt wird! Was läuft da falsch?

Habe auch dieses rudimentäre JS ausprobiert:

<a href="javascript:;" onclick="document.location.hash='konfiguration';">hier klicken</a>
...
<div id="konfiguration"></div>

Aber das Ergebnis ist das gleiche...

Wäre super dankbar um jede Hilfe, gleich vorweg, in JS bin ich ein absoluter Noob, gibts vielleicht eine Möglichkeit mit CSS3, einfach X pixel nach unten zu scrollen, wenn man auf den Link klickt?

 

[FPrüfer]

...Nun weiß ich schon, dass "normale" Anker aufgrund der Base URL nicht funktionieren.

Ab Version 4.05 sollten auch ganz "normale" Ankerlinks funktionieren. Dort wird dann ein Smooth-Scrolling per Javascript ausgeführt. Einzige Bedingung: Der Anker muß auch tatsächlich existieren!

 

[tresor-online]

Das find ich grundsätzlich sehr positiv... aber unsere Shops laufen mit einer Ausnahme noch auf JTL Shop 3.20, an der Umstellung wird zwar schon gearbeitet, kann aber noch dauern...
Gibts da also eine Notlösung, die ich verwenden kann?

 

[FPrüfer]

Du könntest die beiden Funktionen smoothScroll und smoothScrollToAnchor (https://gitlab.jtl-software.de/jtlshop/shop4/blob/v4.06.0/templates/Evo/js/jtl.evo.js#L269) aus dem Evo-JS des 4er auf dein Template adaptieren. Die Funktion smoothScroll muß dann einmal beim Pageload aufgerufen werden und macht sowohl das Scrollen zu einem existierenden Anker wenn ein Hash in der URL angegeben ist, als auch das Verknüpfen aller Ankerlinks mit der smoothScrollToAnchor-Funktion.

 

[tresor-online]

Danke für den Tipp, es hat sich bei mir jetzt herausgestellt, dass das Problem durch das Template hervorgerufen wurden, konnte es mit dem Support von JTL lösen, jetzt funktioniert der Link, auf das smoothe scrollen kann ich bis JTL Shop 4 warten

 

[Groundhog]

Hello, Hello,

Ich hol das mal aus der Versenkung. Wir nutzen das Evo Menü nicht sondern das Megamenü von Kreativkonzentrat. Das Menü dockt beim Scrollen oben auch an und hat kanpp 45 px Höhe.
Ist ja aber auch egal,d enn ich hätte gern ein generelles offset von ca 90px und dass der Scroll etwas langsamer läuft. Was muss ich ändern? Hat hier jemand den Code für mich?

jtl.evo.js liegt schon im Child und läuft. Kleine Anpassungen schaffe ich ja grad noch so...aber da steig ich nicht mehr durch.

 

[FPrüfer]

Die Funktionalität verbirgt sich in der Funktion smoothScrollToAnchor in jtl.evo.js. Du müßtest dort halt die Werte für fixedOffset anpassen und an animate einen anderen als den Standardwert für die Animationsdauer übergeben.

Anm.: Wenn du die jtl.evo.js in dein Child-Template kopierst, musst du dort bei jedem Update die Änderungen aus dem Original per Hand nachziehen.

 

[Groundhog]

@FPrüfer Danke für deine Antwort..schau mal:

smoothScrollToAnchor: function(href, pushToHistory) {
            var anchorRegex = /^#[\w\-]+$/;
            if (!anchorRegex.test(href)) {
                return false;
            }

            var target, targetOffset;
            target = $('#' + href.slice(1));

            if (target.length > 0) {
                // scroll below the static megamenu
                var nav         = $('#evo-main-nav-wrapper.do-affix');
                var fixedOffset = 90; <-- ALSO SO?

                targetOffset = target.offset().top - fixedOffset - parseInt(target.css('margin-top'));
                $('html, body').animate({scrollTop: targetOffset}, 800); <-- UND SO?

                if (pushToHistory) {
                    history.pushState({}, document.title, location.pathname + href);
                }

                return true;
            }

            return false;
        },

Anm.: Wenn du die jtl.evo.js in dein Child-Template kopierst, musst du dort bei jedem Update die Änderungen aus dem Original per Hand nachziehen.

Ja...is eh voll nervig

 

[FPrüfer]

...
                var fixedOffset = 90; <-- ALSO SO? Ja

                targetOffset = target.offset().top - fixedOffset - parseInt(target.css('margin-top'));
                $('html, body').animate({scrollTop: targetOffset}, 800); <-- UND SO? Ja, oder so: $('html, body').animate({scrollTop: targetOffset},{duration: 800})
...