滚动值无效

时间:2018-03-31 07:26:15

标签: jquery html scroll



 <html>
	<head>
		<title>jQuery 6</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<style>
		#a1{
		background: aqua;
		width:80vw;
		height:80vh;
		}
		#a2{
		background: maroon;
		width:60vw;
		height:60vh;
		}
		#a3{
		background: magenta;
		width:40vw;
		height:40vh;
		}	
		#a4{
		background: green;
		width:20vw;
		height:20vh;
		}
		#a5{
		background: purple;
		width:10vw;
		height:10vh;
		}
		#i11{
		position:fixed;
		}
		img{
			width:3vw;
			position:fixed;
			right:5px;
			bottom:5px;
		}
		</style>
	</head>
	<body>
	<a id="a1">
		<script>
		$(document).ready(function(){
			$("tr:odd").css("background-color", "yellow")
			$("tr:even").css("background-color", "silver")
			/*$("input").blur(function(){
				alert('hello')
			})
			$("input").change(function(){
				$("table").hide(1000)
			})
			$("td").dblclick(function(){
				$(this).hide(2000)
			})*/
			//$("a").click(function(event){
				//event.preventDefault();
			//})
		//	$("#a5").css("border", "4px dotted yellow")
			//$("#a5").parent().css("border", "4px dotted blue")
			//$("#a5").parents().css("border", "4px dotted red")
			//$("#a5").parentsUntil("aside").css("border", "4px dotted red")
			/*$("#b1").click(function(){
			if($("#t1").prop("checked")==true){
				$("#t1").prop("checked", false)
			}
			//else{
				$("#t1").prop("checked", true)
			}
			})*/
			$("img").hide();
			$(window).scroll(function(){
				if ($(this).scrollTop()>120){
				$("i11").val($(this).scrollTop())
				$("img").fadeIn("slow")
			}
			else{
				$("img").fadeOut("slow")
			}
			})
		})
		
		</script>
		<input type="checkbox" id="t1" />
		<button id="b1">check/uncheck</button>
		<input id="i11">
		<table border="1">
			<tr>
				<th>Company</th>
				<th>Country</th>
			</tr>
			<tr>
				<td><a href="http://google.com">Google</a></td>
				<td>USA</td>
			</tr>
			<tr>
				<td><a href="http://smentertainment.com">SM entertainment</td>
				<td>South Korea</td>
			</tr>
			<tr>
				<td>BitCoin</td>
				<td>Japan</td>
			</tr>
			<tr>
				<td>Marvel</td>
				<td>USA</td>
			</tr>
			<tr> 
				<td>Vans</td>
				<td>USA</td>
			</tr>
		</table>
		<div id="a1">
			<div id="a2">
				<aside id="a3">
					<div id="a4">
						<div id="a5"></div>
					</div>
				</aside>
			</div>
		</div><a href="jquery6.html#a1"><img src="up.jpg">
		<br><br><br><br><br><br><br>text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
	</body>
</html>
&#13;
&#13;
&#13;

所以这是我的完整代码,我试图做的是在滚动时获取输入值,这里出了什么问题?

我一直在反复检查代码,但价值只是赢了。然后通过图像我试图到达页面的顶部,这是有效的,淡入淡出方法也是如此。函数中的问题是什么?

1 个答案:

答案 0 :(得分:1)

您错过了#内的$("i11").val($(this).scrollTop())所以这将是$("#i11").val($(this).scrollTop()),请看下面的代码段:

&#13;
&#13;
<html>
	<head>
		<title>jQuery 6</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<style>
		#a1{
		background: aqua;
		width:80vw;
		height:80vh;
		}
		#a2{
		background: maroon;
		width:60vw;
		height:60vh;
		}
		#a3{
		background: magenta;
		width:40vw;
		height:40vh;
		}	
		#a4{
		background: green;
		width:20vw;
		height:20vh;
		}
		#a5{
		background: purple;
		width:10vw;
		height:10vh;
		}
		#i11{
		position:fixed;
		}
		img{
			width:3vw;
			position:fixed;
			right:5px;
			bottom:5px;
		}
		</style>
	</head>
	<body>
	<a id="a1">
		<script>
		$(document).ready(function(){
			$("tr:odd").css("background-color", "yellow")
			$("tr:even").css("background-color", "silver")
			/*$("input").blur(function(){
				alert('hello')
			})
			$("input").change(function(){
				$("table").hide(1000)
			})
			$("td").dblclick(function(){
				$(this).hide(2000)
			})*/
			//$("a").click(function(event){
				//event.preventDefault();
			//})
		//	$("#a5").css("border", "4px dotted yellow")
			//$("#a5").parent().css("border", "4px dotted blue")
			//$("#a5").parents().css("border", "4px dotted red")
			//$("#a5").parentsUntil("aside").css("border", "4px dotted red")
			/*$("#b1").click(function(){
			if($("#t1").prop("checked")==true){
				$("#t1").prop("checked", false)
			}
			//else{
				$("#t1").prop("checked", true)
			}
			})*/
			$("img").hide();
			$(window).scroll(function(){
				if ($(this).scrollTop()>120){
				$("#i11").val($(this).scrollTop())
				$("img").fadeIn("slow")
			}
			else{
				$("img").fadeOut("slow")
			}
			})
		})
		
		</script>
		<input type="checkbox" id="t1" />
		<button id="b1">check/uncheck</button>
		<input id="i11">
		<table border="1">
			<tr>
				<th>Company</th>
				<th>Country</th>
			</tr>
			<tr>
				<td><a href="http://google.com">Google</a></td>
				<td>USA</td>
			</tr>
			<tr>
				<td><a href="http://smentertainment.com">SM entertainment</td>
				<td>South Korea</td>
			</tr>
			<tr>
				<td>BitCoin</td>
				<td>Japan</td>
			</tr>
			<tr>
				<td>Marvel</td>
				<td>USA</td>
			</tr>
			<tr> 
				<td>Vans</td>
				<td>USA</td>
			</tr>
		</table>
		<div id="a1">
			<div id="a2">
				<aside id="a3">
					<div id="a4">
						<div id="a5"></div>
					</div>
				</aside>
			</div>
		</div><a href="jquery6.html#a1"><img src="up.jpg">
		<br><br><br><br><br><br><br>text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>text
	</body>
</html>
&#13;
&#13;
&#13;