css 平滑滚动效果 |css3过渡方式

下面介绍一些制作CSS平滑滚动效果的方法：

/* 方法一：使用scroll-behavior属性 */
html {
scroll-behavior: smooth;
}
/* 方法二：使用jQuery实现平滑滚动效果 */
$(document).ready(function(){
// 给所有含有锚点链接的a标签添加点击事件
$('a[href*="#"]').on('click',function (e) {
e.preventDefault();
// 获取要滚动到的元素ID
var target = this.hash;
// 计算要滚动到的位置
var $target = $(target);
var scrollTo = $target.offset().top - 50;
// 使用animate()方法实现平滑滚动效果
$('html, body').stop().animate({
'scrollTop': scrollTo
}, 1000, 'swing', function () {
window.location.hash = target;
});
});
});

以上两种方法都可以实现平滑滚动效果，而第二种方法还可以控制滚动的速度和缓动函数，更加灵活。

总之，CSS平滑滚动效果是网页设计中不可或缺的部分，通过不断学习和实践，大家可以运用各种技巧来为用户带来更好的体验。