Scroll To (using jquery)

by Rachel Gallen

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>

  <div>
    <p><a id="top">Hover over an img:</a>
      <a href="#middle" class="scroll"><img src="http://www.musicmatters.ie/images/4.jpg" alt="middle" title="middle"></a>
      <a href="#bottom" class="scroll"><img src="http://www.musicmatters.ie/images/3.jpg" alt="bottom" title="bottom"></a>
    </p>
    <div id="tp">Top</div>
    <p><a id="middle">Hover over an img:</a>
      <a href="#top" class="scroll"><img src="http://www.musicmatters.ie/images/11.jpg" alt="top" title="top"></a>
      <a href="#bottom" class="scroll"><img src="http://www.musicmatters.ie/images/3.jpg" alt="bottom" title="bottom"></a>
    </p>
    <div id="mid">Middle</div>

    <p>
      Hello my name is rachel Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
      <br>
      <strong>Note that this paragraph has no scroll class, so when you hover over the images, it is not scrolled to, but you CAN add a scroll class anywhere (with a hashtag). </strong>
    </p>
    <p><a id="bottom">Hover over an img:</a>
      <a href="#top" class="scroll"><img src="http://www.musicmatters.ie/images/11.jpg" alt="top" title="top"></a>
      <a href="#middle" class="scroll"><img src="http://www.musicmatters.ie/images/4.jpg" alt="middle" title="middle"></a>
      <div id="btm">Bottom</div>
  </div>


</body>

CSS

#btm {
  background-color: #21b81e;
  width: 50%;
  height: 300px;
}

#mid {
  background-color: #2d80e8;
  width: 50%;
  height: 300px;
}

#tp {
  background-color: #c00;
  width: 50%;
  height: 300px;
}

img {
  width: 25px;
  height: 25px;
}

JavaScript

$(document).ready(function() {
  $(".scroll").hover(function(event) {
    $('html,body').animate({
      scrollTop: $(this.hash).offset().top
    }, 500);
  });
});