jQuery Problem / Frage

01/08/2012 14:05 CracyCrazz#1

Moin Leute,

ich versuche jetzt schon einige Stunden die L�sung meines Problems zu finden, leider finde ich es einfach nicht. Das Problem ist, ich hatte vor eine Funktion zu erstellen um nach oben Sliden zu k�nnen, also ein Button der erst Versteckt ist und nach einer gewissen nach unten gescrollten Pixeln wird es angezeigt. So die Funktion das es nach oben Scrollt ist kein Problem diese funktioniert ohne Probleme, aber die Funktion mit dem Verstecken und des Anzeigen ist das Problem.

So, jetzt kommen wir mal zum Code teil:

PHP Code:


			
        <script>

            $(document).ready(function() {

                $(window).scroll(function() {

                    if($(this).scrollTop() > 200) {

                        $('#back-to-top').fadeIn();

                    } else {

                        $('#back-to-top').fadeOut();

                    }

                });

                

                $('#back-to-top').click(function() {

                    $('html').animate({

                        scrollTop: 0

                    }, 800);

                    return false;

                });

            });

        </script>

Der untere Teil funktioniert einwandfrei, nur die Funktion ist derzeit das Problem.

Ich hoffe ihr klnnt mir weiterhelfen, achja bitte nicht mit Google doch mal. Das versuche ich seit Gestern aber finde einfach nichts..

Wenn ihr noch Informationen braucht fragt einfach.

01/08/2012 19:14 Ennea#2

Du benutzt da $(this).scrollTop(). Gibt die Funktion, angewandt auf window, �berhaupt irgendwas anst�ndiges zur�ck? Vielleicht solltest du eher $("html").scrollTop() benutzen.

01/08/2012 19:14 Whoknowsit#3

Also bei mir gehts problemlos. W�re nat�rlich denkbar, dass ich das Problem nicht verstehe :)

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="Content-Language" content="de"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<style type="text/css">
    body {
        margin:0px;
    }

    #back-to-top {
        background-color: red;
        position:fixed;
        bottom:0;
        width:100%;
        z-index:100;
        display: none;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script> 
            $(document).ready(function() { 
                $(window).scroll(function() { 
                    if($(this).scrollTop() > 200) { 
                        $('#back-to-top').fadeIn(); 
                    } else { 
                        $('#back-to-top').fadeOut(); 
                    } 
                }); 
                $('#back-to-top').click(function() { 
                    $('html').animate({ 
                        scrollTop: 0 
                    }, 800); 
                    return false; 
                }); 
            }); 
        </script>
</head>
<body>
<div id="back-to-top">
    Hallo Welt!
</div>

    <?php
    for($i = 1; $i < 100; $i++) {
      echo "{$i}<br />";
    }
    ?>

</body>
</html>

01/09/2012 12:49 CracyCrazz#4

Quote:

Originally Posted by Whoknowsit

Also bei mir gehts problemlos. W�re nat�rlich denkbar, dass ich das Problem nicht verstehe :)

PHP Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <meta http-equiv="Content-Language" content="de"/> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta http-equiv="Pragma" content="no-cache"/> <meta http-equiv="Expires" content="-1"/> <meta http-equiv="Cache-Control" content="no-cache"/> <style type="text/css"> body { margin:0px; } #back-to-top { background-color: red; position:fixed; bottom:0; width:100%; z-index:100; display: none; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function() { $(window).scroll(function() { if($(this).scrollTop() > 200) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); $('#back-to-top').click(function() { $('html').animate({ scrollTop: 0 }, 800); return false; }); }); </script> </head> <body> <div id="back-to-top"> Hallo Welt! </div> <?php for($i = 1; $i < 100; $i++) { echo "{$i}<br />"; } ?> </body> </html>

Bei mir funktioniert es seltsamer weise mit deinem Code bei mir auch nicht, ausser wenn ich es komplett Copy & Paste in eine neue PHP Datei. Aber in meinem Skript funktioniert es seltsamer weise nicht. Ich bin etwas verwundert.. Wenn ich das Display nicht auf none setze funktioniert das Hochscrollen ja ohne Probleme. Nur das FadeIn und FadeOut ist komisch :x.

01/09/2012 13:12 Ennea#5

Quote:

Originally Posted by CracyCrazz

Bei mir funktioniert es seltsamer weise mit deinem Code bei mir auch nicht, ausser wenn ich es komplett Copy & Paste in eine neue PHP Datei.

Encoding deiner Datei futsch? Schau mal nach.

01/09/2012 18:35 CracyCrazz#6

Eigentlich nicht, moment ich Poste mal den Kompletten Quellcode da ist aber eigentlich nichts falsch.
[Only registered and activated users can see links. Click Here To Register...]

01/09/2012 18:53 Ennea#7

Gehste mal oben bei Notepad++ auf "Encoding" und schaust worauf das steht. �blicherweise ANSI. Aber da du sagtest, dass der andere Code geht, wenn du ihn in eine neue Datei einf�gst, ging ich davon aus, dass das eventuell falsch gesetzt ist.

01/09/2012 20:08 CracyCrazz#8

Es ist beides Ansi Kodiert, gibt es sonst noch etwas woran es liegen k�nnte?

01/09/2012 20:15 Ennea#9

Jetzt, wo du's sagst.. ja! Du hast ready() f�r document zwei mal definiert :) Sollte man nicht tun.