I am new to Javascript, so I apologize if this is a mess. After reading this post, I implemented the code necessary to make a div appear after the user starts to scroll. When I put the code into JSFiddle (http://jsfiddle.net/EnzoMac/ZyKar/1212/) it works perfectly. However, it does not work at all on my website. It is in the JSFiddle, but here is my code:
HTML/ JavaScript:
<div class="backtotop"> <a href="#">Back to Top</a></div>
<script type="text/javascript">
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 1) {
$('.backtotop').fadeIn();
} else {
$('.backtotop').fadeOut();
}
});
</script>
CSS:
.backtotop
{
display: none;
width:200px;
height:inherit;
position:fixed;
bottom:0;
right:0;
border:thin solid black;
background:lightgray;
color:black;
z-index:1;
text-align:center;
}
.backtotop a {
color:black;
font-family:calibri;
}
Basically, my question is this: Why doesn't my code work?
Thank you very much!