Jquery scrollTop 动画不起作用......“无法读取 undefin 的属性‘top’
[英]Jquery scrollTop animation not working .... "Cannot read property 'top' of undefind
问题描述
我的 jquery 动画 scrollTop 不起作用。 当我单击<a> ，它只会将我带到没有任何动画的锚点。 有人可以为此提出任何解决方案吗？ 当我运行网页时，显示错误"Uncaught TypeError: Cannot read property 'top' of undefined" 。
这是我的 html 代码：
<div class="BackgroundImg"></div>
<head>
<title>Ryan Robert 1.0</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" >
$(function(){
$("a").click(function(){
if(this.hash){
var hash = this.hash.substr(1);
var $toElement = $("a[name="+hash+"]");
var toPosition = $toElement.position().top;
$("html,body").animate({
scrollTop : toPosition
},2000,"easeOutExpo");
return false;
}
});
});
</script>
身体的一部分：
<ul>
<li><div id="menus">
.home</div></li>
<li><a href="#secondBox"><div id="menus">
.project</div></a></li>
<li><a href="#thirdBox"><div id="menus">
.skills</div></a></li>
<li><a href="#forthBox"><div id="menus">
.contact</div></a></li>
</ul>
</div>
<div id="firstBox">
<div id="profileDescriptionBox">
<div id="profileDescription">
<h1>.Welcome!</h1>
2 个解决方案
解决方案1
1 2016-05-08 11:50:55
问题是你不使用防止默认！
因此，您实际上就像浏览器中的默认设置一样被锚定。
对于流畅的动画，我建议您执行以下操作：
$(document).ready(function(){ $("a").click(function(e){ e.preventDefault(); var offset = $(this.hash).offset(); if (!offset) { return; } $("html,body").animate({ scrollTop : offset.top },2000); }); });
.box { min-height: 400px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <ul> <li><a href="#first-box">First box</a></li> <li><a href="#second-box">Second box</a></li> <li><a href="#third-box">Third box</a></li> </ul> <div id="first-box" class="box"> First box </div> <div id="second-box" class="box"> Second box </div> <div id="third-box" class="box"> Third box </div> <div class="box"> Just extra to fill out </div>
或者 jsfiddle.net
解决方案2
0 2016-05-08 08:56:11
您是否尝试过使用offset().top ？
var toPosition = $toElement.offset().top;
未捕获的TypeError：无法读取未定义的属性'scrollTop'
[英]Uncaught TypeError: Cannot read property 'scrollTop' of undefined
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.