Die Animation nach oben scrollen funktioniert nicht

Question

vor ein paar Tagen begann ich mit meiner Unternehmenswebsite zu arbeiten. Ich sah, dass etwas fehlte, also entschied ich mich, einen Scroll-to-Top-Button mit Animation zu erstellen. Ich bin ein Anfänger in der Programmierung, also entschied ich mich, im Internet zu suchen. Dort habe ich this Beispiel gefunden. Ich habe den ganzen Code buchstäblich kopiert, aber es funktioniert nicht.

der Knopf in der html:

<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a> 

und dies ist die jQuery:

$(window).scroll(function() { 
    if ($(this).scrollTop() >= 50) {   
     $('#return-to-top').fadeIn(200);  
    } else { 
     $('#return-to-top').fadeOut(200); 
    } 
}); 
$('#return-to-top').click(function() {  
    $('body, html').animate({ 
     scrollTop : 0      
    }, 500); 
}); 

Ich weiß nicht, was das Problem ist, weil es auf dem codepen funktioniert. Kann jemand das beheben?

Vielen Dank im Voraus

Answer 1

Es gibt nicht genügend Informationen ist aber Wenn Sie den gleichen Code von Codepen verwenden, dann müssen Sie möglicherweise jQuery in Ihre Website-Header aufnehmen. (https://cdnjs.com/libraries/jquery/)

Answer 2

Sie sollten etwas tun:

$('#return-to-top').click(function(e) { 
e.preventDefault();  
$('body, html').stop().animate({ 
    scrollTop : 0      
}, 500); 
}); 

Und vor allem, wenn Sie jQuery enthalten haben:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" 
crossorigin="anonymous"></script> 

Answer 3

Welchen Browser benutzen Sie?

Wie auch immer, scheint $(window).scrollTop(0);von allen Browsern unterstützt zu sein, aber wenn man das Buch animieren möchten, $('html,body').animate({scrollTop:0},500);, wie Sie verwenden, wenn Sie Ihre HTML und CSS-Code teilen können, vielleicht das Problem ist, in der z-index oder versuchen Sie, die Breite und die Höhe der ".icon-chevron-up" auch auf die "# Return-to-top".

Alles scheint zu funktionieren, versuchen Sie die console.log('some string here'); zu verwenden, um zu sehen, ob der Code ausgeführt wird.

Überprüfen Sie auch, ob Sie die jquery Skript hinzugefügt: script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

Hoffe, dass Sie es lösen.

Answer 4

Ich bemerkte, dass viele Leute mir sagten, die jquery-Bibliothek mit einzuschließen. Ich habe die Bibliothek vorher hinzugefügt, aber nachdem ich die Antworten überprüft habe, ist mir aufgefallen, dass ich die falsche Bibliothek hinzugefügt habe. So, jetzt ist es repariert Vielen Dank Jungs.