PHP Forum - Smooth-scrolling

PHP Forum (http://www.selfphp.de/forum/index.php)

- HTML, CSS und JavaScript Help! (http://www.selfphp.de/forum/forumdisplay.php?f=24)

- - Smooth-scrolling (http://www.selfphp.de/forum/showthread.php?t=24927)

Smooth-scrolling

Hallo,

mein Plan ist an der linken seite ein menü zu machen was seinen platz behält. über den rest der seite gibt es einen iframe. über links mit menü wird der inhalt des iframes gesteuert.
es gibt für die einzelnen inhalte nicht jeweils eine seite, sondern nur eine große mit ankern.
funktioniert schonmal wie ich mir das wünsche (heißt beim klicken auf einen link im menü springt die seite im iframe zum punkt/anker wo er hin soll)
optimieren wollte ich das jetzt noch mit smoothscrolling. und da scheitere ich. mit js/jquery habe ich keine erfahrung und brauche deswegen ein paar impulse um weiter zu kommen
folgendes habe ich als letztes in den <body>-tag des dokumentes eingefügt, was der iframe anzeigt:

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

<script>

        $(document).ready(function() {

                $('a[href^="#"]').click(function(event) {

                        var id = $(this).attr("href");

                        var offset = 60;

                        var target = $(id).offset().top - offset;



                        $('html, body').animate({scrollTop:target}, 500);

                        event.preventDefault();

                });

        });

</script>

AW: Smooth-scrolling

Also ich hab das problem jetzt doch lokalisieren können.
beim skript findet man "a[href^="#"]", heißt es gilt für aufrufe von "#beispiel", der in dem frame wird aber "file.html#beispiel" aufgerufen und das scheint zu stören.
wie kann ich das problem beseitigen?

AW: Smooth-scrolling

Als erstes würde ich den iframe entfernen.
Eine Lösung in HTML mit CSS würde dann so aussehen:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <title>scrolltest mit fixed</title>

  <style  type="text/css">

  #menue {

  float:left;

  width:100px;

  position:fixed;

  }

  #inhalt{

  margin-left:110px;

  }

  </style>

  </head>

  <body>

      <div id="menue">erster Eintrag<br />

      zweiter Eintrag<br />

      dritter Eintrag<br />

      vierter Eintrag<br /></div>

      <div id="inhalt">sinnloser Text zum auffüllen der Seite bis man scrollen muß. <br />...

      sinnloser Text zum auffüllen der Seite. <br /></div>

  </body>

</html>

Somit solltest du auch keine Probleme mit deinen Ankern bekommen, kannst auf Frames verzichten und hast sauberes HTML.