JS Гладкая прокрутка, прокрутите вниз до конца/внизу div, а не сверху

Question

У меня есть ссылка, которая прокручивается в области той же страницы. Таким образом, страница не перескакивает, я добавил некоторую плавную прокрутку JavaScript (см. Ниже).

Проблема заключается в том, что скрипт прокручивает страницу до вершины целевого div. Он делает это с некоторым ослаблением, поэтому он замедляется, когда он добирается до финального div. Это хорошо, но если последний div меньше высоты окна браузера, он никогда не сможет прокручиваться до вершины div. Он просто попадает в нижнюю часть страницы, и его внешний вид сломан, так как нет ослабления.

Я пробовал несколько способов сделать последний прокрутку div в нижней части div, но безрезультатно. Есть идеи, как это сделать?

Я сделал jsfiddle выпуска здесь: https://jsfiddle.net/gky7y6gu/2/

$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 

Answer 1

Я добавил некоторую логику, чтобы убедиться, что scrollTop никогда не превышает высоту тела за вычетом высоты окна. Таким образом, easyOut всегда виден.

https://jsfiddle.net/gky7y6gu/3/

$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     if (target.length) { 
     var scrollTo = target.offset().top; 
     var bodyHeight = $('body').height(); 
     var windowHeight = $(window).height(); 
     if (bodyHeight - windowHeight < scrollTo) { 
      scrollTo = bodyHeight - windowHeight; 
     } 
     $('html,body').animate({ 
      scrollTop: scrollTo 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
});