JS | Div 不会在 onscroll 中淡出答案

【问题标题】：JS | Div will not fade in onscrollJS | Div 不会在 onscroll 中淡出
【发布时间】：2016-10-02 16:34:41
【问题描述】：

当我向下滚动网页时，尝试添加一个“滚动到顶部”按钮以淡入。不想知道，我已经完全应用了另一个网页并且工作正常，在这个网页上，它只是不想知道。我做错了什么？

脚本和样式表是分开的并附加在头部，它们不构成网页的文档正文。

很久了，

<!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>

【问题讨论】：

您的代码按预期工作jsfiddle.net/by49ph5s

标签： javascript jquery html css

【解决方案1】：

如果脚本是您首先调用的 js 的一部分，那可能是您的问题。您必须先加载 jquery。如果您运行开发者工具，您可能会在控制台中看到它在“$(window)”处失败。

【讨论】：

【解决方案2】：

首先将 jquery 库移动到自定义脚本的顶部

<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>

对于使用 js 的淡入淡出，您可以点击此链接。解释得很好——

Fade In on Scroll Down, Fade Out on Scroll Up

【讨论】：

不，这绝对是愚蠢的，它工作了一个，现在它“决定”它不会打扰，这是我以前使用的代码，这是可以再次工作的代码，因为它一台电脑而不是一个不听话的孩子！ $(window).scroll(function(){ if($(this).scrollTop() > 150){ $('#scroll-to-top-button').slideUp(); } });

【解决方案3】：

由于我是第一个回答，所以我将回复您的评论到与我相似的另一个答案：

这并不愚蠢，因为 javascript - 除非动态加载 - 按列出的顺序加载。由于 jquery 只是一个 javascript 库，因此必须先加载它，然后才能调用任何 jquery 函数。

您的其他代码可能以其他方式继承了 jquery。没有上下文就很难判断。

【讨论】：

【解决方案4】：

将您的 jQuery 库脚本放在您的个人脚本上方，方法是将其放在其上方的行中
试试这个：

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

但似乎 DaniP 的小提琴工作正常：https://jsfiddle.net/by49ph5s/

【讨论】：