&引用；向下滚动“；JavaScript函数未滚动到正确位置

我有一个具有“向下滚动”功能的登录页。此功能的代码取自（向下滚动按钮#5）

我的登录页如下所示：

现在，当您单击“滚动”时，您将立即转到这一点（没有平滑过渡）：

当您应该一直走到这一点时（平滑过渡+页眉接触窗口/屏幕顶部）：

那么，我需要在JavaScript中修复什么才能使它滚动到正确的点呢？以下是我所拥有的：

//javascript functions
(function ($, root, undefined) {    
$(function () { 
    'use strict';       
    // DOM ready, take it away      
}); 
})(jQuery, this);

//scroll down function
(function($) {
$('a[href*=#]').on('click', function(e) {
    console.log( $(".container").offset().top)
    e.preventDefault();
    $('html,body').animate({       
        scrollTop: $("#menu-main").offset().top - 6}, 1700);
    //$('html, body').animate({ scrollTop: 
$($(this).attr('href')).offset().top}, 500, 'linear');
});
})(jQuery);

我尝试过调整这一行中的数字：

scrollTop:$（“#menu main”）.offset（）.top-6}，1700）、6和1700无效

还尝试取消最后一行的注释，并将500改为其他数字，但没有效果

这是首页的HTML，包括导航菜单（标题）：


废话收藏
欢迎
去收集废话









很难为此创建一个JSFIDLE，因为它是一个WordPress站点，我正在使用
获取标题，这是导航菜单所在的位置。让我知道我还能帮什么忙，谢谢

编辑：这是我试图复制的一个很好的例子：
你的卷轴id和它的目标相同吗

<section id="section5" class="demo">
    <a href="#section5"><span></span>Scroll</a>
</section>

我们想在哪里滚动？？？？到页眉
因此，我们将给
a
在菜单中标记目标

<a href= "#menu-main"><span></span>Scroll</a>



这将修复它
你的卷轴id和它的目标相同吗

<section id="section5" class="demo">
    <a href="#section5"><span></span>Scroll</a>
</section>

我们想在哪里滚动？？？？到页眉
因此，我们将给
a
在菜单中标记目标

<a href= "#menu-main"><span></span>Scroll</a>



这将解决它
以下是用于向下滚动的代码：

//scroll down
jQuery(document).ready(function ($) {
$('#section5').click(function (e) {
    e.preventDefault();
    $('html, body').animate({
    scrollTop: $("#menu-main").position().top
    }, 2000);
    });
});

2000控制速度…数字越小速度越快，数字越高速度越慢。第一组括号中需要“#section5”，这是起点#主菜单是终点。如果有人理解代码的其余部分，请解释
 下面是用于向下滚动的代码：

//scroll down
jQuery(document).ready(function ($) {
$('#section5').click(function (e) {
    e.preventDefault();
    $('html, body').animate({
    scrollTop: $("#menu-main").position().top
    }, 2000);
    });
});

2000控制速度…数字越小速度越快，数字越高速度越慢。第一组括号中需要“#section5”，这是起点#主菜单是终点。如果有人理解代码的其余部分，请解释