Javascript jQuery平滑滚动到固定菜单锚定仅在页面顶部时有效

我正在尝试创建一个简单的单页导航，带有一个固定的菜单，可以沿着页面平滑地滚动到我定义的锚

我的问题是，只有当页面滚动处于最顶端时，它才能正确滚动。如果我先单击一个菜单项，然后再单击另一个菜单项，它将滚动到页面上看起来非常随机的位置

这仅在使用平滑滚动jQuery脚本时发生。删除脚本将导致正确的锚链接行为，但不幸的是，没有令人愉快的平滑滚动：(

我做了一个例子来说明这一点，还有一个小例子

---

我做了以下更改，它对我很有用。希望它也能帮助你

$(document).ready(function () {
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var targetHref = $(this).attr('href');  //CHANGE HERE
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $(targetHref).position().top   // CHANGE HERE
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

---

在这种情况下，

块元素

工作得更好，而不是使用

a

标记作为书签使用

div

标记并将节的所有相应内容包装在其中

//平滑滚动到定位链接
$（文档）.ready（函数（）{
$（'a[href^=“#“]”）。关于（'click'，函数（e）{
e、 预防默认值（）；
var target=this.hash；
变量$target=$（目标）；
$（'html，body'）。设置动画({
scrollTop:$target.offset（）.top-50
}，900，'swing'，函数（）{
window.location.hash=目标；
});
});
})；

。菜单已修复{
宽度：100%；
高度：50px；
背景色：红色；
颜色：#fff；
位置：固定；
顶部：0px；
左：0px；
保证金：自动；
文本对齐：居中；
}
.菜单修正了{
宽度：20%；
显示：内联块；
线高：50px；
}

Lorem ipsum dolor sit amet，供职于精英。Nunc porta Pelletsque velit。Donec mattis lacus in nisl volatipat dapibus。Nulla viverra diam nisl，非节杖前舌苔。Suspendisse erat tortor，tincidunt nec volatim，Efficity
我要告诉你，食物的有效性。前庭和前庭。身体的健康和健康是基本要素。


Lorem ipsum dolor sit amet，供职于精英。Nunc porta Pelletsque velit。Donec mattis lacus in nisl volatipat dapibus。Nulla viverra diam nisl，非节杖前舌苔。Suspendisse erat tortor，tincidunt nec volatim，Efficity
我要告诉你，食物的有效性。前庭和前庭。身体的健康和健康是基本要素。


Lorem ipsum dolor sit amet，供职于精英。Nunc porta Pelletsque velit。Donec mattis lacus in nisl volatipat dapibus。Nulla viverra diam nisl，非节杖前舌苔。Suspendisse erat tortor，tincidunt nec volatim，Efficity
我要告诉你，食物的有效性。前庭和前庭。身体的健康和健康是基本要素。


Lorem ipsum dolor sit amet，供职于精英。Nunc porta Pelletsque velit。Donec mattis lacus in nisl volatipat dapibus。Nulla viverra diam nisl，非节杖前舌苔。Suspendisse erat tortor，tincidunt nec volatim，Efficity
我要告诉你，食物的有效性。前庭和前庭。身体的健康和健康是基本要素。

链接1

Lorem ipsum dolor sit amet，供职于精英。Nunc porta Pelletsque velit。Donec mattis lacus in nisl volatipat dapibus。Nulla viverra diam nisl，非节杖前舌苔。Suspendisse erat tortor，tincidunt nec volatim，Efficity
我要告诉你，食物的有效性。前庭和前庭。身体的健康和健康是基本要素。


Lorem ipsum dolor sit amet，供职于精英。Nunc porta Pelletsque velit。Donec mattis lacus in nisl volatipat dapibus。Nulla viverra diam nisl，非节杖前舌苔。Suspendisse erat tortor，tincidunt nec volatim，Efficity
我要告诉你，食物的有效性。前庭和前庭。身体的健康和健康是基本要素。


Lorem ipsum dolor sit amet，供职于精英。Nunc porta Pelletsque velit。Donec mattis lacus in nisl volatipat dapibus。Nulla viverra diam nisl，非节杖前舌苔。Suspendisse erat tortor，tincidunt nec volatim，Efficity
我要告诉你，食物的有效性。前庭和前庭。身体的健康和健康是基本要素。


Lorem ipsum dolor sit amet，供职于精英。Nunc porta Pelletsque velit。Donec mattis lacus in nisl volatipat dapibus。Nulla viverra diam nisl，非节杖前舌苔。Suspendisse erat tortor，tincidunt nec volatim，Efficity
我要告诉你，食物的有效性。前庭和前庭。身体的健康和健康是基本要素。


Lorem ipsum dolor sit amet，供职于精英。Nunc porta Pelletsque velit。Donec mattis lacus in nisl volatipat dapibus。Nulla viverra diam nisl，非节杖前舌苔。Suspendisse erat tortor，tincidunt nec volatim，Efficity
我要告诉你，食物的有效性。前庭和前庭。身体的健康和健康是基本要素。


Lorem ipsum dolor sit amet，供职于精英。Nunc porta Pelletsque velit。Donec mattis lacus in nisl volatipat dapibus。Nulla viverra diam nisl，非节杖前舌苔。Suspendisse erat tortor，tincidunt nec volatim，Efficity
我要告诉你，食物的有效性。前庭和前庭。身体的健康和健康是基本要素。


Lorem ipsum dolor sit amet，供职于精英。Nunc porta Pelletsque velit。Donec mattis lacus in nisl volatipat dapibus。Nulla viverra diam nisl，非节杖前舌苔。Suspendisse erat tortor，tincidunt nec volatim，Efficity
我要告诉你，食物的有效性。前庭和前庭。身体的健康和健康是基本要素。


Lorem ipsum dolor sit amet，Concertetur Adipising eli
$(document).ready(function () {
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var targetHref = $(this).attr('href');  //CHANGE HERE
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $(targetHref).position().top   // CHANGE HERE
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});