Make <div> appear upon scrolling

Question

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!

Answer 1

Are you using jQuery install link anywhere before this code? And if yes, then check your javascript console and see what errors are there.
jQuery Install Link:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>