滾動到導航僅從第一個元素開始

Question

我是javascript的新手，無法完全掌握要進行這項工作所需的更改。

這是鏈接 。

我有一個帶有可折疊固定導航的容器。 您應該能夠單擊每個導航項並滾動到該章節。 關鍵是：它僅從頂部或“第1章”開始起作用。 當我兩次單擊導航章節時，它會上下移動，而不僅僅是停留在其錨點上。

這是我在沒有固定導航的情況下找到的javascript-要使其按我想要的方式工作需要進行哪些更改？：

function scrollNav() {
  $('.nav a').click(function(){
    //Toggle Class
    $(".active").removeClass("active");
    $(this).closest('li').addClass("active");
    var theClass = $(this).attr("class");
    $('.'+theClass).parent('li').addClass('active');
    //Animate
    $('#container').stop().animate({
        scrollTop: $(   $(this).attr('href') ).offset().top - 180
    }, 400);
    return false;
  });
  $('.scrollTop a').scrollTop();
}
scrollNav();

非常感謝！

Answer 1

請參閱此更新的小提琴 。 我添加了jQuery庫和用於調試的控制台。

我發現了兩個主要問題：

首先，在這里使用.position()而不是.offset() 。 偏移總是相對於文檔，而位置相對於偏移父對象（可能是也可能不是文檔）。 看到這個答案 。 由於您對相對於父容器的位置感興趣，因此應使用.position().top 。

一旦到位，就可以更容易地推斷出scrollTop的正確值。 滾動經過目標元素后，其相對於#container位置將為負。 如果chapterPosition為-300 ，而當前scrollTop為1000 ，我們想滾動到700。

但是請注意，這是因為#container div是固定位置的。 在上面的小提琴中，如果您不希望使用粘性標題，並且不需要固定#container ，則可以使用另一種方式來計算滾動。