The code for javascript, html and css can be found working smoothly in this jsfiddle However, when the same code is placed into an HTML file like below:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var target = $(".mypara").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() >= target) {
alert("made it!");
clearInterval(interval);
}
}, 250);
</script>
<style>
body {
background-color: linen;
height: 1000px;
}
p {
color: blue;
margin-top: 500px;
}
</style>
</head>
<body>
<p class="mypara">asdfasdfasf</p>
</body>
</html>
When viewed in the chrome console, the following error is displayed:
Uncaught TypeError: Cannot read property 'top' of undefined(anonymous function) @ index - Copy.html:8
This particular error pertains to line 8:
var target = $(".mypara").offset().top;
Are you able to assist in understanding why this error is occurring?