页面锚点定位

kingcwt2020-01-20前端react javascript

一、用法

//
xxx.scrollIntoView({ block: "center", behavior: "smooth" });

二、属性

`block`[string]

start : 头部
center : 中部
end : 尾部

`behavior`[string]

auto : 瞬间到达
smooth : 平滑过渡到达

官方链接 :

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

三、完整代码

React

//demo
const regionRefEle = useRef(null);

<nav ref={regionRefEle}></nav>

<Tag color="magenta" onClick={() => handleAnchor(regionRefEle)}>人群覆盖地区统计榜</Tag>

const handleAnchor = (ele) => {
  ele.current.scrollIntoView({ block: "center", behavior: "smooth" });
};

javascript

<button id="btn">go</button>
<div id="target">这</div>

let btnele = document.getElementById("btn");
let targetele = document.getElementById("target");

btnele.onclick = () => {
  targetele.scrollIntoView({ block: "center", behavior: "smooth" });
};