url rewrite und Anker

[kleiner_Punkt]

Einen schönen Sonntag wünsche ich ,

ich bräuchte bitte mal eure Hilfe.
Auf einer Website habe ich einen fixierten Button unten rechts, der beim draufklicken zur obersten ID= header zurückscrollen soll.

Beim Einbinden von url rewrite bugt der Button - bedeutet, in der Browserzeile wird http://example.com/#header aufgerufen - er springt zwar wieder nach oben - scrollt aber nicht ...

Auf Unterseiten habe ich auch den Button - wenn ich hier auf den Button klicken komme ich zurück zur Startseite - aber nicht auf der gleichen Seite zurück zur #header id (die überall vorhanden ist)
um dem Button das scrollen beizubringen nutze ich folgendes script

Code: Select all

$(function() {
  $('.scroll-button a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top 
        }, 1000);
        return false;
      }
    }
  });
});

.. das ich glücklich irgendwo gefunden und kopiert habe - aber ich habe keine Ahnung von js scripten.

Jemand eine Idee - warum es ohne url rewrite klappt und mit nicht?
lieben Dank
Steffi

[top]

Durch das Rewrite wird vermutlich auch der Link verändert und dadurch wird dieser von dem Script nicht mehr erfasst.

Wenn du innerhalb von ".scroll-button" nur den einen Link hast und immer nach ganz oben scrollen wilst, kannst du das Teil deutlich vereinfachen.

Versuch es mal so: (ungetestet)

Code: Select all

$(function() {
  $('.scroll-button a').click(function() {
     $('html, body').animate({scrollTop:'0px'}, 1000); 
    return false;
  });
});

[Oliver Georgi]

Dein Anker dürfte nicht wirklich nach oben springen, sondern die Seite neu laden — deswegen landest Du zwangläufig wieder oben.

Darauf achten, dass dem Anker unbedingt die gleiche URL zugeordnet ist, wie die Seite hat, in der er angesprungen werden soll. Es genügt also nicht, es so zu realisieren:

Code: Select all

<a href="#anker" class="anchor">Dahin</a>

Es muss die volle URL mit genommen werden:

Code: Select all

<a href="aktuelle-seite.html#anker" class="anchor">Dahin</a>

Ich habe deswegen gerade eben phpwcms entsprechend ergänzt

Dann geht das für Deinen Fall so:

Sprunganker:

Code: Select all

{a:#jump}

generiert <a id="jump"></a>

Relative URL zur aktuellen Seite

Code: Select all

<a href="{a:REL#jump}">

Absolute URL

Code: Select all

<a href="{a:ABS#jump}">

[top]

Schöne Ergänzung.
(Wenn ich das richtig sehe, tritt das Problem seit der head-Ergänzung von <base href="http://www.example.com/" /> auf. )
Funktioniert leider nicht, wenn man externe Inhalte übernimmt auf dessen Sprunganker man keinen Einfluss hat.

Dafür hatte ich mir mal eine Datei für template/inc_script/frontend_render gebastelt:

Code: Select all

<?php
// -----------------------------------------------------------------------------
// TOP-Link den "neueren" phpwcms-Versionen "anpassen"
//  + andere Sprung-Anker 
// -----------------------------------------------------------------------------

// -----------------------------------------------------------------------------
// obligate check for phpwcms constants
   if (!defined('PHPWCMS_ROOT')) {
      die("You Cannot Access This Script Directly, Have a Nice Day.");}
// -----------------------------------------------------------------------------
 
   $content['all'] = str_replace('a href="#', 'a href="'.$_SERVER['REQUEST_URI'].'#', $content['all']);
   $content["all"] = str_replace("a href='#", "a href='".$_SERVER["REQUEST_URI"]."#", $content["all"]);
?>

Sollte man aber Einfluss auf die Sprunganker haben, würde ich auf die neue Lösung von OG zurückgreifen. Das erscheint mir eleganter.

[kleiner_Punkt]

Besten Dank Oliver,

klappt wunderbar!

[Oliver Georgi]

Schöne Ergänzung.
(Wenn ich das richtig sehe, tritt das Problem seit der head-Ergänzung von <base href="http://www.example.com/" /> auf. )
Funktioniert leider nicht, wenn man externe Inhalte übernimmt auf dessen Sprunganker man keinen Einfluss hat.

Dafür hatte ich mir mal eine Datei für template/inc_script/frontend_render gebastelt:

Code: Select all

<?php
// -----------------------------------------------------------------------------
// Anchor-Link den "neueren" phpwcms-Versionen "anpassen"
//  + andere Sprung-Anker 
// -----------------------------------------------------------------------------

   $content["all"] = str_replace("a href='#", "a href='".rel_url()."#", $content["all"]);
   // oder
   // $content["all"] = str_replace("a href='#", "a href='".abs_url()."#", $content["all"]);
?>

[update]

Macht das mal jemand ins WIKI?

[top]

Danke für´s Überarbeiten.

Allerdings brauchte ich für die grottige Quelle beide Schreibweisen, da im HTML tatsächlich sowohl <a haref="#..."> als auch <a href='#...'> verwendet wurde.

Ist etwas gegen diese Schreibweise einzuwenden?

Code: Select all

<?php
// -----------------------------------------------------------------------------
// Anchor-Link den "neueren" phpwcms-Versionen "anpassen"
//  + andere Sprung-Anker 
// -----------------------------------------------------------------------------

   $content["all"] = str_replace("a href='#", "a href='".rel_url()."#", $content["all"]);
   $content['all'] = str_replace('a href="#', 'a href="'.rel_url().'#', $content['all']);
   // oder
   // $content["all"] = str_replace("a href='#", "a href='".abs_url()."#", $content["all"]);
   // $content['all'] = str_replace('a href="#', 'a href="'.abs_url().'#', $content['all']);
?>

Oder geht das auch noch irgendwie geschickter?

@claus: Wenn mir niemand zuvor kommt, werde ich die Tage mal die Zugangsdaten raussuchen (die ich vor Ewigkeiten mal bekommen habe) und es ergänzen.

[Oliver Georgi]

Oder geht das auch noch irgendwie geschickter?

…nunja, normalerweise eine Regular Expression

[update]

@claus: Wenn mir niemand zuvor kommt

Prima prima!

[update]

Und? Im wiki? Wenn nicht, dann jetzt.