jQuery Problem / Frage

CracyCrazz · 01/08/2012, 15:05

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.

Ennea · 01/08/2012, 20:14

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

Whoknowsit · 01/08/2012, 20:14

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>

CracyCrazz · 01/09/2012, 13:49

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.

Ennea · 01/09/2012, 14:12

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.

CracyCrazz · 01/09/2012, 19:35

Eigentlich nicht, moment ich Poste mal den Kompletten Quellcode da ist aber eigentlich nichts falsch.

Ennea · 01/09/2012, 19:53

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.

CracyCrazz · 01/09/2012, 21:08

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

Ennea · 01/09/2012, 21:15

Jetzt, wo du's sagst.. ja! Du hast ready() für document zwei mal definiert

Sollte man nicht tun.