时间戳

首页 > 解决方案 > 尽管编码正确，为什么我的 JS 不工作？

javascript - 尽管编码正确，为什么我的 JS 不工作？

问题描述

// JavaScript Document
"use strict";
$(window).scroll(function(){
	if($(window).scroll() > 100){
		$("#scrollTop").fadeIn();
		}
	});

$(window).scroll(function(){
	if($(window).scroll() < 100){
		$("#scrollTop").fadeOut();
		}
	});

$(document).ready(function(){
	$('.fa').click(function(){
		$('html, body').animate({scrollTop : 0},1000);
		return false;
	});
});
#scrollTop{
	position: fixed;
	bottom: 20px;
	right: 20px;
	cursor: pointer;
	display: none;
  background-color:#0D0155;
}

#scrollTop:after{
	font-family: fontAwesome;
	content:"\f102";
}

.fa {
	padding: 20px;
	width: 60px;
  	font-size: 15px!important;
  	text-align: center;
  	text-decoration: none;
  	margin: 5px 2px;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition-delay: 0.3s;
	-webkit-transition-delay:0.3s;
	background-image: -webkit-linear-gradient(20deg,#0D0155,#3A83F3);
    background-image: -o-linear-gradient(20deg,#0D0155,#3A83F3);
    background-image: linear-gradient(20deg,#0D0155,#3A83F3);
 	color: white;
	margin-left: 10px;
	
}

.fa:hover {
    background-image: -webkit-linear-gradient(left, #0D0155, #0D0155);
    background-image: -o-linear-gradient(left, #0D0155, #0D0155);
    background-image: linear-gradient(to right, #0D0155, #0D0155);
	text-decoration: none;
	color: #FFF;
}
<div class="fa" id="scrollTop"></div>

"use strict"
$(window).scroll(function(){
"use strict";
if($(window).scrollTop() > 300){
    $('#scrollTop').fadeIn();
    }
});

$(window).scroll(function(){
"use strict";
if($(window).scrollTop() < 300){
    $('#scrollTop').fadeOut();
    }
});

$(document).ready(function(){
"use strict";
$('#scrollTop').click(function(){
    $('html, body').animate({scrollTop : 0},1000);
    return false;
 });
});

对，我正在尝试实现一个按钮，一旦用户从顶部滚动一定距离，它就会在屏幕底部淡入。

单击此按钮后，必须滚动到网页顶部。

这以前有效，现在只是决定停止工作。这是不可取的。

我尝试了以下方法：

预期的结果是 JS 做了一些惊人的事情，只是按照代码告诉它做的事情，动作结果并不令人惊讶，因为什么也没发生。没有淡入按钮，当你点击它时没有任何反应。

坦率地说，我已经受够了编码，决定当它以前工作得非常好时它不会工作。

那么，为什么事情没有按照它说的去做呢？

标签： javascripthtmlcss

解决方案

这是工作的jsFiddle：https ://jsfiddle.net/6cpf07ed/

您的代码很好，只是您需要调用scrollTop()jQuery 函数而不是scroll()

$(window).scroll(function(){
    if($(window).scrollTop() > 100){
        $("#scrollTop").fadeIn();
        }
    });

$(window).scroll(function(){
    if($(window).scrollTop() < 100){
        $("#scrollTop").fadeOut();
        }
    });

$(document).ready(function() {
    $('.fa').click(function(){
        $('html, body').animate({scrollTop : 0},1000);
        return false;
    });
});

推荐阅读