JS | Div不会淡入onscroll

时间:2016-06-02 19:13:19

标签: javascript jquery html css

尝试添加"滚动到顶部"当我向下滚动网页时按钮淡入。我不想知道,我已经在这个网页上正好应用了这个并且工作得很好,在这个网页上,它只是不想知道。我做错了什么?

剧本&样式表是独立的&附在头部,它们不构成网页的文件正文。

很长一段时间,

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

4 个答案:

答案 0 :(得分:0)

如果脚本是您首先调用的js的一部分,那可能是您的问题。你必须先加载jquery。如果您运行开发人员工具,您可能会在控制台中看到它在&#34; $(窗口)&#34;

时失败。

答案 1 :(得分:0)

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

<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

答案 2 :(得分:0)

由于我先回答,我会回复你对另一个与我相似的答案的评论:

这不是愚蠢的,因为javascript - 除非动态加载 - 按列出的顺序加载。由于jquery只是一个javascript库,因此必须在调用任何jquery函数之前加载它。

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

答案 3 :(得分:0)

  1. 将jQuery库脚本放在个人脚本上方,将其放在上面的行上
  2. 尝试使用:

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

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