html tab顶部吸附,仿京东内容上下滚动,吸顶tab紧跟着切换

最近工作中一个劲儿的出现了这种内容上下滚动,吸顶tab紧跟着切换的效果，并且点击tab会滚动到具体的位置类似锚点，所以我就写了一个记录下来，我们先看下效果图，大概就是这个样子，下面我们开始撸代码

上下滚动内容吸顶tab切换效果图

html部分

• tab1
• tab2
• tab3
• tab4
• tab5

content1

content2

content3

content4

content5

css部分

如果点击tab页面滚到具体的内容位置的时候想让页面有一种滚动效果，最简单的方法就是给html,body加一个样式 scroll-behavior:smooth; 如果不需要的话就可以去掉

*{

margin:0;

padding:0;

list-style:none;

}

html,body{