为什么滚动行为：smooth不起作用，但javascript window.scroll smooth起作用？

我有一个导航栏向下滚动到锚元素。导航栏位于身体内部

我的css：

body {
        scroll-behavior: smooth;
}

在页面中，我还使用了一些javascript。一种是javascript，它具有以下功能来导航到其他页面元素：

window.scroll({
    top : pos,
    left : 0,
    behavior : 'smooth'
});

使用Chrome，当我调用javascript函数时，滚动是平滑的。但当我通过导航栏链接导航到锚点时，它并不平滑

有人能解释一下原因吗

另外，Firefox的导航栏和javascript功能都很流畅。我认为其中一个有用，但另一个不行，这有点奇怪

编辑：我的解决方法如下（vanilla JS/works适用于所有现代浏览器）：

以及回退滚动功能：

window.smoothScrollTo = function(endX, endY, duration) {
        let startX = window.scrollX || window.pageXOffset,
        startY = window.scrollY || window.pageYOffset,
        distanceX = endX - startX,
        distanceY = endY - startY,
        startTime = new Date().getTime();

        // Easing function
        let easeInOutQuart = function(time, from, distance, duration) {
            if ((time /= duration / 2) < 1) return distance / 2 * time * time * time * time + from;
            return -distance / 2 * ((time -= 2) * time * time * time - 2) + from;
        };

        let timer = window.setInterval(function() {
            let time = new Date().getTime() - startTime,
            newX = easeInOutQuart(time, startX, distanceX, duration),
            newY = easeInOutQuart(time, startY, distanceY, duration);
            if (time >= duration) {
                window.clearInterval(timer);
            }
            window.scrollTo(newX, newY);
        }, 1000 / 60); // 60 fps
    };

window.smoothScrollTo=函数（endX，endY，duration）{
让startX=window.scrollX | | window.pageXOffset，
startY=window.scrollY | | window.pageYOffset，
距离X=endX-startX，
距离Y=endY-startY，
startTime=新日期（）.getTime（）；
//缓和功能
设easeInOutQuart=函数（时间、起点、距离、持续时间）{
如果（（时间/=持续时间/2）<1）返回距离/2*时间*时间*时间+开始时间；
返回-距离/2*（（时间-=2）*时间*时间*时间-2）+距离；
};
让计时器=window.setInterval（函数（）{
让时间=新日期（）.getTime（）-startTime，
newX=easeInOutQuart（时间、开始时间、距离x、持续时间），
newY=easeInOutQuart（时间、起点、距离、持续时间）；
如果（时间>=持续时间）{
窗口清除间隔（计时器）；
}
scrollTo（newX，newY）；
}，1000/60）；//每秒60帧
};

也许您想尝试使用jQuery平滑滚动。我认为原生滚动可能并不总是支持平滑滚动。使用jQuery会更安全

$("html, body").animate({ scrollTop: 0 }, "slow");

如果您正在使用其他锚点，则需要确保它们防止默认跳转和滚动。我也会使用jQuery

---

Ref:

基于，

滚动行为：平滑

不处理

主体

元素（）：

HTML正文元素的滚动行为属性不正确 传播到视口

但它也适用于其他选择器，如

html

（）

您还可以尝试纯JavaScript解决方案（）：

---

我不知道你是否还需要一个答案，但我偶然看到一篇文章，它为我修复了css：

已经有一段时间了，但是有些人在浏览器上禁用了JavaScript，所以我认为这不是最好的选择。添加：

body{scroll behavior:smooth；}

的问题是，除非将其添加到

html

中，否则它将无法工作。例如：

在

主体上

：

正文{
滚动行为：平滑；
}
a{
背景颜色：浅灰色；
填充：10px 20px；
颜色：黑色；
右：10px；
边缘底部：10px；
}

主体上没有滚动效果
Lorem ipsum dolor sit amet，是一位杰出的献身者。怀孕前的女性，男性，女性。阿利奎姆·埃拉特·帕特。伊涅·伊普苏姆·内克、福西布斯·乌特·内克、阿利夸·埃吉特·普鲁斯。乌尔里西斯·波特提托·内克，一个波特提托·托托·普尔文纳非。在多尔·比本杜姆的奥奇·波特提托·努拉·马蒂斯·库苏斯·内克和非精英的维瓦摩斯·菲舍卢斯。利奥·多洛，阿利奎特·麦格纳·欧，亨德雷特·康斯奎特·夸姆。佩伦特·埃吉特·奥迪奥·费利斯。整数id posuere mi。我是普尔文纳，拍卖行，直径。Fusce sed ex eu sem bibendum aliquam ultrices ut ipsum。在hac habitasse Plateum，一句名言。埃涅亚帝国主义者在欧洲的威利特·马莱苏亚达·奥里帕特。塞德·莫莱斯蒂是一种营养调味品。在suscipit，不需要生活，不需要工作，不需要工作，不需要工作。纳姆·特里斯蒂克·鲁特鲁姆·瓦普塔特。
Donec imperdiet nisl非利古拉Ultrices调味品。这是一种暂时性的精神病，是一种精神病。塞德在奥奇农克。无酒后驾车和无酒后驾车的人。Duis fringilla前庭ipsum是一种智人流苏。佩伦茨克非维韦拉麦格纳，塞德·拉奥里特·奥奇。Donec elit eros，imperdiet sit amet risus sed，placerat发酵液sem。在猫科动物的秃鹫门、大黑熊门、大黑熊门。我的孩子们，我的孩子们，我的孩子们，我的孩子们。毛里斯和维韦拉·莱克图斯。博物馆馆长马萨·夸姆、拉齐尼亚·阿利夸姆·安特、拍卖人索尔利西图丁·图皮斯。普尔维纳尔角，我指的是蜗牛角。不，这是一个巨大的欧盟。
这是一个有尊严的大人物，坐在艾美和精英的位子上。维瓦摩斯·弗林蒂利亚·波苏尔·萨皮安·欧·波苏尔。这是一辆最大的汽车。Sed et diam eu lorem gravida pharetra在Sed mauris。这是一个非常重要的问题。这是一个伟大的事业，是一个伟大的事业。终末颞前庭。毛里斯·波苏尔、埃尼姆·欧·奥纳雷·莫莱斯蒂、乌尔纳·艾库利斯·马萨、欧拉西尼亚·厄罗斯·奥迪奥·阿卡姆。塞德·森姆·努克、欧盟的索利西图丁、自由分子。两人之间的病魔，是一种永恒的真理。莫比·阿库姆桑·胡斯托·内克·福西布斯·普尔维纳尔。佩伦茨克拍卖行。梅塞纳人是一个射手座的人，是一个暂时的三叉戟。
普鲁恩调味品波苏尔权杖。车辆前庭。前庭法雷特拉（pharetra）教堂（Nonc nec orci scelerisque），普朗斯特（pellentesque）发酵室（Pretum）。Nam odio tortor，aliquet nec sem quis，rutrum ornare lectus。乌拉姆科佩尔·拉库斯·亨德雷特（Lusce scelerisque ullamcorper lacus vitae hendrerit）。不要因为你的工作而感到沮丧。奥迪奥弗林利亚的前庭为封建式直径，即ullamcorper直径权杖。埃尼亚暂时性的斗牛士。毛里斯孕妇的生命周期，毛里斯母亲的生命周期，以及毛里斯母亲的生命周期。佩纳蒂布和马的奥奇瓦里乌斯（Orci varius natoque penatibus et ma）
$("html, body").animate({ scrollTop: 0 }, "slow");

function scrollToTop() {
  window.scrollTo({
    top: 1000,
    behavior: 'smooth'
  });
}

* {
  scroll-behavior: smooth;
}

enter code here