FadeIn（）/ FadeOut（）页面在动画前滚动

Question

我正在使用以下方法淡入和淡出我的页面的一部分：

//function shows more reviews
function ShowMoreReviews() {
    $(document.getElementById('extraReviews')).fadeIn(1000);
    document.getElementById('showReviewsIcon').className = "glyphicon glyphicon-upload";
    document.getElementById('btnShowReviews').onclick = function() { ShowLessReviews() };
    document.getElementById('hideReviewsText').innerHTML = "Show less";
}
//function shows less reviews
function ShowLessReviews() {
    $(document.getElementById('extraReviews')).fadeOut(1000);
    document.getElementById('showReviewsIcon').className = "glyphicon glyphicon-download";
    document.getElementById('btnShowReviews').onclick = function() { ShowMoreReviews() };
    document.getElementById('hideReviewsText').innerHTML = "Show more";
}

“extraReviews”div位于页面的最底部，当调用淡入方法时，该部分已淡入但由于它不在用户的视图中，因此它们看不到动画而且只是跳跃：

https://i.gyazo.com/531382f82b711c6a86c1d4e245e16a12.mp4（视频）

当调用淡出方法时，页面将跳转到动画运行时结束位置的位置：

https://i.gyazo.com/e24869497b5a8098267e7eea9184b3f6.mp4

#extraReviews div在页面加载时隐藏

window.onload = function() {
    $('#extraReviews').hide();
}