html的滚屏效果遇上锚点,html5中锚点滚动

1、通过a标签实现锚点，将a标签的href属性取值为所要链接到的块的id选择器

缺点：它会改变url

lightblue

lightgreen

lightpink

lightsalmon

2、通过Element.scrollIntoView()

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。

语法：Element.scrollIntoView({behavior：'auto', block: 'start', inline: 'nearest'})

behavior (可选)：定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。

block (可选)：定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。

inline (可选)：定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

• lightblue
• lightgreen
• lightpink
• lightsalmon

let list = document.querySelectorAll('li');

let divs = document.querySelectorAll('.box>div');

for (let i = 0, len = list.length; i < len; i++) {

list[i].onclick = function() {

divs[i].scrollIntoView({block: 'start', behavior: 'smooth', inline: 'center'});

};

}

参考文档MDN