Demo

Probiere ClanSphere aus und teste daran herum. Demo


Antworten: 6
Seite [1]
maGGiTech


Rock the board





Beiträge: 53
 # Thema - 05.06.2014 um 14:49 Uhr
Hier das Tutorial: http://www.paulund.co.uk/how-to-create-an-animated-scroll-to-top-with-jquery

Hier die Demo: http://www.paulund.co.uk/playground/demo/jquery_scroll_to_top/

Hier meine Seite: http://cms.team-pheenix.de/

Hier meine Javascript Datei +-

 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
1. / 2. / ... 
 $(document).ready(function(){
    
    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });
    
    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
    
});

die genau so auf dem Server im richtigen Ordner liegt mit der korrektenten Verlinkung in der intex.htm im head.

Hier mein Button +-

 
1.
2.
1. / 2. / ... 
 <a href="#" style="display: inline;" class="scrollToTop"></a>

bzw. der Link

Hier mein CSS +-

 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
1. / 2. / ... 
 
.scrollToTop {
  height:100px;
  width:100px;
  position:fixed;
  background:url(../images/scroll_top.png);
  bottom:45px;
  right:60px;
  display:inline;
}

Attribute dazu

Und geht nicht, aber warum? >____<

Also der Button wird angezeigt und er bewegt sich durch Postition:fixed auch mit, jedoch funktioniert das Javascript dazu nicht, der Button soll ja erst einfaden nach dem man über 100 Pixel von oben runtergescrollt hat. Hab auch schon den Wert 1000 genommen, keine Veränderung.

Eigentlich sollte der Button wenn man oben ist überhaupt nicht sichtbar sein, deswegen denke ich das die Javascript Datei irgendwie nicht angesprochen wird, warum weiß nicht nicht.

Nach oben springen kann man jadoch trotzdem durch den href="#"


------------------
Mutligaming Community team-pheenix.de

Zuletzt editiert von maGGiTech am 05.06.2014 um 15:01 Uhr (3x Editiert)
Inaktiv
sgraewe ClanSphere Team

Supporter
Supporter




Beiträge: 6116
 # Antwort: 1 - 05.06.2014 um 16:27 Uhr
Liegt an deiner index.htm.
Du lässt 2 mal jquery laden, lässt alle jscripts davor laden etc.

jquery wird von clansphere automatisch geladen, die 2te verlinkung ist also überflüssig, und pack mal alle jscripts ans ende der datei, hinter {func:javascript}


Inaktiv
|
maGGiTech
Thread-Ersteller


Rock the board





Beiträge: 53
 # Antwort: 2 - 05.06.2014 um 17:27 Uhr
und pack mal alle jscripts ans ende der datei, hinter {func:javascript}


Kannst du mir das als Laie vielleicht ein bisschen ausfürlicher formulieren?


------------------
Mutligaming Community team-pheenix.de

Inaktiv
|
sgraewe ClanSphere Team

Supporter
Supporter




Beiträge: 6116
 # Antwort: 3 - 07.06.2014 um 14:22 Uhr
Clansphere, bringt alles an jscript was es braucht selber mit, unteranderem auch jquery.
{func:javascript}, ist der Platzhalter um diese Scripte frei platzieren zu können.

Füge {func:javascript} mal in deine Index ein, vor den </body> tag.
Und darunter dann deine eigenen jscripts, wie zum beispiel das mit dem button.


Inaktiv
|
maGGiTech
Thread-Ersteller


Rock the board





Beiträge: 53
 # Antwort: 4 - 07.06.2014 um 15:01 Uhr
super danke jetzt klappt das script überhaupt, jedoch funktioniert es nicht so wie in der demo irg.

hier funktioniert es einwandfrei: http://www.paulund.co.uk/playground/demo/jquery_scroll_to_top/

und bei mir : http://cms.team-pheenix.de/

wird der button zu Beginn angezeigt und verschwindet dann abrupt und der Übergang zu dem y-Wert ist auch nicht sauber, das Bild stottert manchmal beim Fade und der Fade ist auch generell ganz unsauber. FadeIn und FadeOut sehen auch unterschiedlich aus ka. Der Javascript dort und bei mir ist aber identisch.

da steht in der index das hier drin:
 
1.
2.
1. / 2. / ... 
 <script>(function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {window.status = 'https://www.cwcs.co.uk/?utm_source=BuySellAds&utm_medium=Banner%20PaulLund&utm_content=300x250&utm_campaign=BuySellAds%20Banners'; return true;
};}}}})</script>

kann das evtl. daran liegen?


------------------
Mutligaming Community team-pheenix.de

Inaktiv
|
TeQu!La ClanSphere Team


Specialist




Herkunft: Grevenbroich
Beiträge: 2142
 # Antwort: 5 - 07.06.2014 um 16:33 Uhr
Also ich war gerade auf deiner Seite und bei mir läuft das ganz flüssig in einem durch bis zum Seiten Anfang


------------------

ClanSphere - professional clan care starts here
Inaktiv
|
maGGiTech
Thread-Ersteller


Rock the board





Beiträge: 53
 # Antwort: 6 - 07.06.2014 um 16:39 Uhr
oh ok hmm habs mit firefox nochmal geschaut, bei mir ists aber da zu mindest auch so das wenn ich die seite refreshe das der button dann angezeigt wird


------------------
Mutligaming Community team-pheenix.de

Inaktiv
|
Antworten: 6
Seite [1]


Sie müssen sich registrieren, um zu antworten.