Question

我是所有这一切的新手，但我只是想让我的网站如此，当您点击与图像相关的时间（链接）时，它会平滑滚动到该图像。我的问题是，当我这样做时，每个链接都会滚动到同一个图像。

的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>

换句话说，当我点击“11AM”链接时，它仍然会转到9AM图像。

提前感谢！

Answer 1

您无需重新发明轮子。你可以使用像这样的微库： ScrollIt

平滑滚动仅滚动到一个元素

1 个答案: