smooth scroll only scrolls to one element

Question

I'm new to all of this, but i'm simply trying to make my site so when you click the time of day (link) that correlates with the image, it smooth scrolls to that image. My issue is that when i do this, every link scrolls to the same image.

Javascript

$(function(){
$('body').css({marginTop: $('ul').height()});
$('.scroller-link').click(function(e){
    e.preventDefault();
    id = $(this).attr('href').replace('#', '');
    $('html,body').animate({scrollTop: $("#"+id).offset().top-$(this).closest('ul').height()},'slow');
});

HTML

  <Body>
  <ul>
 <a href="#1" class="scroller-link">9AM</a> 
 <a href="#2" class="scroller-link">11AM</a>
  </ul>

    <div id="1">
    <a> <img src="images/9am.jpg" /></a>
    </div>
    <div id="2">
    <a> <img src="images/11am.jpg" /></a>
    </div>

In other words, when i click the "11AM" link, it still goes to the 9AM image.

thanks in advance!

Answer 1

You don't need to reinvent the wheel. You can use micro libraries like this one: ScrollIt

smooth scroll only scrolls to one element

Question

1 answers

solution1
0 ACCPTED 2013-11-20 21:27:49

smooth scroll only scrolls to one element

Question

1 answers

solution1 0 ACCPTED 2013-11-20 21:27:49

solution1
0 ACCPTED 2013-11-20 21:27:49