JS | Div wird nicht eingeblendet. Onscroll

Der Versuch, eine "nach oben scrollen" -Schaltfläche hinzuzufügen, um einzublenden, wenn ich die Webseite herunterscrolle. Will nicht wissen, ich habe dies genau eine andere Webseite angewendet und funktioniert gut, auf dieser Webseite will es einfach nicht wissen. Was mache ich falsch?JS | Div wird nicht eingeblendet. Onscroll

Das Skript & Stylesheets sind separat & im Kopfbereich angebracht, sie bilden nicht den Dokumentenkörper der Webseite.

Lange Zeit

<!doctype html> 
<html> 
<head> 
<script type="text/javascript" src="../scripts/AltScript.js"></script> 
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<link href="../styles/alternate-styling-sheet.css" rel="stylesheet" type="text/css"> 
<head> 
<body> 
<div id="scroll-to-top-button"> 
<a href="#">Top<i class="fa fa-caret-up" aria-hidden="true"></i></a> 
</div> 
</body> 
<html/> 
/----------------------------------/ 
<script> 
$(window).scroll(function(){ 
if($(this).scrollTop() > 150){ 
    $('#scroll-to-top-button').slideDown(); 
    } 
}); 
</script> 
/---------------------------------------/ 
<style> 
#scroll-to-top-button{ 
right:20px; 
bottom:20px; 
display:none; 
background-color:#3A83F3; 
position:fixed; 
border-style:none; 
border-radius:5px; 
width:100px; 
z-index:99999999999; 
} 
#scroll-to-top-button a{ 
padding:10px; 
display:block; 
color:white; 
font-size:17px; 
text-decoration:none; 
} 
#scroll-to-top-button a:hover{ 
background-color:#81AFED; 
border-radius:5px; 
} 
#scroll-to-top-button a i{ 
padding-left:10px; 
float:right; 
} 
</style>

Quelle

2016-06-02 Anonymous

Ihr Code funktioniert wie erwartet https://jsfiddle.net/by49ph5s/ – DaniP

Wenn das Skript Teil der js ist zuerst nennend, die Ihr Problem sein kann. Sie müssen zuerst jquery laden. Wenn Sie Entwickler-Tools ausführen, werden Sie wahrscheinlich in der Konsole sehen, dass es bei "$ (window)" fehlschlägt.

Quelle

2016-06-02 19:22:17

Zunächst einmal bewegen jquery Libs an die Spitze der benutzerdefinierte Skripts

<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script type="text/javascript" src="../scripts/AltScript.js"></script>

Und für verblassen in js verwenden Sie diese Links folgen können. Es ist gut erklärt -

Fade In on Scroll Down, Fade Out on Scroll Up

Quelle

2016-06-02 19:27:50 pradeep1991singh

Nein, das ist absolut dumm, es funktionierte und jetzt ist es "entschieden" es wird nicht stören, das ist der Code, den ich zuvor verwendet habe, und das ist der Code, der wieder funktioniert, weil es ein Computer & nicht ungehorsam ist Kind! $ (Fenster) .scroll (function() { \t if ($ (this) .scrollTop()> 150) { \t \t $ ('# Scroll-to-Top-Button') slideUp(). \t \t} \t}); –

Seit ich das erste Mal beantwortet, werde ich auf deinen Kommentar auf die andere Antwort antworten, die ähnlich wie mir ist:

Es ist nicht dumm, wie Javascript, - es sei denn, dynamisch geladen - lädt in der angegebenen Reihenfolge. Da jquery nur eine Javascript-Bibliothek ist, muss sie geladen werden, bevor Sie irgendwelche jquery-Funktionen aufrufen können.

Es ist möglich, dass Ihr anderer Code jQuery anderweitig geerbt hat. Ohne Kontext wäre das schwer zu sagen.

Quelle

2016-06-02 20:10:12

Laden Sie Ihre jQuery-Bibliothek Skript über Ihre persönlichen Skript, indem es auf der Zeile über sie setzen
Versuchen Sie es mit dieser:

<script> $(document).ready(function(){ $(window).scroll(function(){ if($(this).scrollTop() > 150){ $('#scroll-to-top-button').slideDown(); }}); }); </script>

Aber es scheint, dass DaniP Geige funktioniert einwandfrei: https://jsfiddle.net/by49ph5s/

Quelle

2016-06-02 20:18:14

Ja, DaniPs Geige funktioniert genau so, wie ich es möchte. –

JS | Div wird nicht eingeblendet. Onscroll

Antwort

Verwandte Themen