javascript - JS | div 不会在 onscroll 中淡出

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

最佳答案

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

关于javascript - JS | div 不会在 onscroll 中淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37600328/

相关文章:

javascript - Node.js 和依赖项管理

html - 子 div 不会响应百分比高度

jquery - 如何编写可重用的 jquery 点击函数?

javascript - Jquery .text() 在带有 cordova 的 ios 上无法正常工作

c# - 如何判断一个 html 字符串是否会在浏览器中显示为空? (C#/正则表达式?)

javascript - 我们如何使用 ng-show 和 ng-hide 在一个简单条件下管理多个条件

javascript - 在另一个二维数组中复制打乱数组时出现问题

javascript - Formik 和 Material-UI

javascript - Vue - 将规则数组传递给子组件

jquery - 无法在 jQuery 中调用 @Html.Action()