Master-Slave Produktansicht - Link mit Anker auf Artikelvariationen

Hallo,

ich nutze mittlerweile die Produktdarstellung "Master/Slave".
Produktinfo: product_info_v2.html
product_master_slave.html

Nun möchte ich oben bei meiner Produkt-Info einen Button reinmachen mit dem Ziel auf der gleichen Seite - Bei der Überschrift der Slave-Artikel.

Ich habe die <h2> bereits mit dem Anker ausgestattet (id="varianten").
Den Button habe ich auch implementiert: <a href="#varianten" title="Zu den Artikelvarianten"><span class="varianten_button">Zu den Artikelvarianten</span></a>

Soweit so gut... in der Praxis leider ohne Funktion...

Wenn ich den Button nun anklicke, lande ich auf meiner Startseite (http://www.domain.de/#varianten) und nicht auf meiner Produktseite.
So sollte es eigentlich sein: http://www.domain.de/artikel.html#varianten - wenn ich die url direkt im Browser eingebe, funktioniert das ganze auch.

Meine Frage nun:
Wie kann ich die Artikel-url mit in dem Link integrieren, also im Code VOR das "#varianten" setzen?

Hat jemand damit Erfahrungen? Hat das schonmal jemand versucht?

Hallo,
@mitglied
Ich kann es mit "id" oder mit "name" machen - wenn ich die url manuell mit dem #varianten versehe, funktioniert beides. Bei deiner Lösung ist lediglich die <h2>-Überschrift als Link dargestellt.

@jotest
Ich kann auf deiner Seite keinen Anker-Link finden..?

Dass der Link immer auf http://domain.de/#varianten wechselt, muss ein anderes Problem sein...
RewriteBase... SEOURL... ich komm da einfach nicht weiter...

Oder besteht die Möglichkeit, per Variable oder so, die aktuelle URL mit in den Link - vor das "#varianen" zu integrieren?

Ich kann aktuell leider noch keinen Link teilen, da der Shop noch nicht online verfügbar ist.

<a href="artikel.html#varianten" title="Zu den Artikelvarianten"><span class="varianten_button">Zu den Artikelvarianten</span></a>

genau so sollte es aussehen... und genau so möchte ich es auch hinbekommen...

Mein Problem liegt am Link..
Die Frage ist nur: wie bekomme ich den Teil mit "artikel.html" irgendwie "dynamisch" in meinen Code in der product_info_v2.html auf dem Server?
klar, wenn ich eine Artikel-Url davor schreibe, dann geht das - aber eben nur mit dem einen Artikel. Es sind nur leider ein paar hundert Artikel in dem Shop.

Gibt es da keine Variable oder sowas?
sowas wie {$AKTUELLE_URL} vielleicht...?

Falls jemand vor dem gleichen Problem steht: ich habe es mit Javascript gelöst

<script>
var showBookmark = (function () {
  var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
       /*
       * nDuration: the duration in milliseconds of each frame
       * nFrames: number of frames for each scroll
       */
       nDuration = 200, nFrames = 10;


  function _next () {
    if (_itFrame > nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
    _isBot = true;
    document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
    document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
    if (_useHash && _itFrame === nFrames) { location.hash = _bookMark; }
    _itFrame++;
  }


  function _chkOwner () {
    if (_isBot) { _isBot = false; return; }
    if (_scrollId > -1) { clearInterval(_scrollId); _scrollId = -1; }
  }


  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }


  return function (sBookmark, bUseHash) {
    _scrollY = document.documentElement.scrollTop;
    _scrollX = document.documentElement.scrollLeft;
    _bookMark = sBookmark;
    _useHash = arguments.length === 1 || bUseHash;
    for (
      var nLeft = 0, nTop = 0, oNode = document.querySelector(sBookmark);
      oNode;
      nLeft += oNode.offsetLeft, nTop += oNode.offsetTop, oNode = oNode.offsetParent
    );
    _nodeX = nLeft, _nodeY = nTop, _itFrame = 1;
    if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
  };
})();
</script>

und den link dann so:

<span class="varianten_button" onclick="showBookmark('#varianten');">Zur Variantenauswahl</span>

Viele Grüße