Question

我正在尝试完成我的投资组合，但是当我点击导航栏中的列表元素时，它会将我带到我想去的地方，但当我再次点击相同的元素时，它会将我带回到顶部。我认为这是因为jQuery滚动到href，在list元素中我有一个带href的锚。我怎么能阻止这个？

jQuery -

  $('a').click(function(){
    $('html, body').animate({
      scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 500); 
  });

JSFiddle.

Answer 1

我认为问题在于您没有考虑窗口的当前滚动位置。

当您滚动到其中一个部分时，其$.offset().top为0，即使它不在页面顶部，也位于屏幕的顶部。

将当前滚动条位置添加到scrollTop函数中对我有用：

$('a').click(function(){

    var scrollToName = $(this).attr("href").substr(1);
    var scrollTo = $("body").scrollTop() + $('[name="' + scrollToName + '"]').offset().top;

    $('html, body').animate({
        scrollTop: scrollTo
    }, 500);
});

以下是fiddle

双击li元素jQuery滚动到屏幕顶部

1 个答案: