smooth scroll only scrolls to one element

https://stackoverflow.com/questions/20086635

02-08-2022
|

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!

Solution

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

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow