JavaScript/JQuery - 单击时平滑滚动到 ID

Question

我的目的是实现平滑的滚动行为，但我是 JS/JQuery 的新手。 当我单击导航栏锚标记时，页面将向下滚动到具有相应 ID 的部分。为此，我这样做了：

HTML

<a onClick="scroller(products)">

JavaScript/JQuery

//get the element
var products = $('#products');
var sustainibility = $('#sustainibility');
var textile = $('#textile');
var platform = $('#platform');

//get default verticalPositionOfElement
var verticalPositionOfElement = products.offset().top;

function scroller(element) { //param = the current element
    verticalPositionOfElement = element.offset().top; //to override vertical position of the element
    $(window).scrollTop(verticalPositionOfElement - 168);
};      

从现在开始，我要做的就是添加平滑的滚动行为，但我不明白如何做到这一点。一些想法？先谢谢你了

Answer 1

我认为你必须将 CSS 放入正文，HTML 滚动行为：平滑例如。

body,html{
     scroll-behavior: smooth;
}

这里有一个示例：https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

Answer 2

我找到了解决方案。现在效果很好。

//get the element
var products = $('#products');
var sustainibility = $('#sustainibility');
var textile = $('#textile');
var platform = $('#platform');

//get default verticalPositionOfElement
var verticalPositionOfElement = products.offset().top;

function scroller(element) { //param = the current element

verticalPositionOfElement = element.offset().top; //to override vertical position of the element

//smooth scroll
$('html, body').animate({
    scrollTop: ($(element).offset().top) - 168
}, 100);
};