Question

// 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;
 });
});

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

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

此操作以前有效，现在只是决定停止工作。这不可行。

我尝试了以下方法：

我已经尝试了文档顶部的“使用严格”功能。
我已经对每个ode函数本身尝试了“使用严格”功能。
我已将“使用严格”功能删除到每个代码功能本身中。
我已删除了文档顶部的“使用严格”功能。
我尝试过从双引号切换到单引号。
我尝试过从单引号切换回双引号。
我尝试将JS插入网页本身，这应该是JS文档头部的链接。
我已将JS删除到网页本身中，这应该是指向JS文档头部的链接。
我从头部的链接中删除了“ type：text.javascript”。
我从头部的链接中插入了“ type：text.javascript”。
我尝试将JS代码中的“ .fa”类插入。
我已经尝试使用ID属性“ scrollTop”进行此操作。

JS的预期结果是做一些令人惊奇的事情，并且按照代码告诉它的那样做，因此动作结果并不令人惊讶，因为什么也没发生。按钮没有褪色，单击此按钮也无反应。

坦率地说，我已经进行了足够的编码，以决定在以前运行良好时，它将无法正常工作。

那为什么不按提示做事呢？

Answer 1

正在使用jsFiddle：https://jsfiddle.net/6cpf07ed/

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

$(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;
    });
});

尽管编码正确，为什么我的JS无法正常工作？

1 个答案: