锚点不跟随滚动位置并且不跳转
Anchor doesn't follow scroll position and doesn't jump
这里是转载linkhttps://codesandbox.io/s/antd-reproduction-template-5lvmz
我试过关注 https://ant.design/components/anchor 但没用。
当我删除
getContainer={() => document.querySelector("#my-scroll-layout")}
showInkInFixed={true}
affix={true}
锚点跟随滚动位置但仍然不跳转。
下面是完整代码
import ReactDOM from "react-dom"
import { version} from "antd"
import "antd/dist/antd.css"
import "./index.css"
import Lorem from "./Lorem"
import { Anchor } from "antd"
const { Link } = Anchor
ReactDOM.render(
<div className="App">
<div>Current antd version: {version}</div>
<Anchor
getContainer={() => document.querySelector("#my-scroll-layout")}
showInkInFixed={true}
affix={true}
>
<Link href="#1" title="1" />
<Link href="#2" title="2" />
<Link href="#3" title="3" />
</Anchor>
<div id="my-scroll-layout">
<h1 id="1">1</h1>
<Lorem />
<h1 id="2">2</h1>
<Lorem />
<h1 id="3">3</h1>
<Lorem />
</div>
</div>,
document.getElementById("root")
)
您必须为 my-scroll-layout 定义滚动和样式 div。
这里是转载linkhttps://codesandbox.io/s/antd-reproduction-template-5lvmz
我试过关注 https://ant.design/components/anchor 但没用。 当我删除
getContainer={() => document.querySelector("#my-scroll-layout")}
showInkInFixed={true}
affix={true}
锚点跟随滚动位置但仍然不跳转。
下面是完整代码
import ReactDOM from "react-dom"
import { version} from "antd"
import "antd/dist/antd.css"
import "./index.css"
import Lorem from "./Lorem"
import { Anchor } from "antd"
const { Link } = Anchor
ReactDOM.render(
<div className="App">
<div>Current antd version: {version}</div>
<Anchor
getContainer={() => document.querySelector("#my-scroll-layout")}
showInkInFixed={true}
affix={true}
>
<Link href="#1" title="1" />
<Link href="#2" title="2" />
<Link href="#3" title="3" />
</Anchor>
<div id="my-scroll-layout">
<h1 id="1">1</h1>
<Lorem />
<h1 id="2">2</h1>
<Lorem />
<h1 id="3">3</h1>
<Lorem />
</div>
</div>,
document.getElementById("root")
)
您必须为 my-scroll-layout 定义滚动和样式 div。