react使用antd(ant design)锚点并悬浮

红太狼 2022-12-04 01:25 113阅读 0赞

import React from 'react'
    import {  Anchor } from 'antd';
    import {  Layout } from 'are-common';
    const {   Sider, Content } = Layout;
    const {  Link } = Anchor;
    const hello: React.FC = (props) => { 
        // const [targetOffset, setTargetOffset] = useState<number | undefined>(undefined);
        // useEffect(() => { 
        //     setTargetOffset(window.innerHeight / 2);
        //   }, []);
        return (
    
            <Layout>
                <Layout>
                    <Content>
                        <div id="a">
                            <div style={ {  height: "1000px" }} id="components-anchor-demo-basic">asasdasdas</div>
                            <div style={ {  height: "1000px" }} id="components-anchor-demo-static">assdf</div>
                        </div>            
                    </Content>
                    <Sider style={ { background:	"#E6E6FA"}}><div style={ {  position:"fixed",top:"500px"}}><Anchor  affix={ false}>
                        <Link href={ "#components-anchor-demo-basic"} title="Basic demo" />
                        <Link href={ "#components-anchor-demo-static"} title="Static demo" />
                        <Link href="#API" title="API">
                            <Link href="#Anchor-Props" title="Anchor Props" />
                            <Link href="#Link-Props" title="Link Props" />
                        </Link>
                    </Anchor></div></Sider>
                </Layout>
            </Layout>
        )
    }
    
    export default hello;

发表评论取消回复

表情：

评论列表（有 0 条评论，113人围观）

还没有评论，来说两句吧...

相关阅读

相关 React安装ant design组件库，并使用

ant design是一个很棒的组件库，官方地址：[快速上手 - Ant Design][- Ant Design] 但是如何在React里面用起来，好像并不是很顺畅，没有像

浅浅的花香味﹌/ 2023年10月14日 13:44/ 0 赞/ 51 阅读

相关 anchor锚点 antvue_浅谈vue 锚点指令v-anchor的使用

如下所示： export default \{ inserted: function(el, binding) \{ el.onclick = function() \{

╰半橙微兮°/ 2022年12月31日 11:19/ 0 赞/ 212 阅读

相关锚点定位

锚点定位通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步： 1. 使用相应的id名标注跳转目标的位置。 (找目标) <h3

小鱼儿/ 2022年12月26日 02:19/ 0 赞/ 148 阅读

相关 react使用antd(ant design)锚点并悬浮

import React from 'react' import { Anchor } from 'antd'; import { Layout }

红太狼/ 2022年12月04日 01:25/ 0 赞/ 114 阅读

相关锚点的使用

我们可以理解锚点为一种超链接，只不过它是网页内部的超链接。我们可以利用它跳转到网页内指定的位置使用技巧: <div id="sa" name="sa">我是锚点，哈哈

ゝ一世哀愁。/ 2022年07月19日 11:58/ 0 赞/ 224 阅读

相关 html锚点

锚点是网页制作中超级链接的一种，又叫[命名锚记][Link 1]。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。英文名：anchor 使用命名锚记可以

亦凉/ 2022年06月07日 08:41/ 0 赞/ 229 阅读

相关 HTML锚点的使用

一、页面内跳转的锚点设置页面内的跳转需要两步：方法一： ①：设置一个锚点链接<a href="\miao">去找喵星人

ゞ浴缸里的玫瑰/ 2022年05月18日 04:19/ 0 赞/ 216 阅读

相关 vue项目锚点的使用

在vue项目中如何使用锚点呢？在vue-router中定义 scrollBehavior scrollBehavior (to, from, savedPosition)

我会带着你远行/ 2021年12月15日 13:57/ 0 赞/ 354 阅读

相关锚点

$('.kk').on('click', function(e) { var thisId = $(this).attr('id');

男娘i/ 2021年09月19日 11:16/ 0 赞/ 413 阅读

相关 html 锚点

锚点: 在一张网页中进行资源跳转 <a href="锚点名">点击访问名称</a> 跳转到锚点name处 <a name=

我不是女神ヾ/ 2021年07月24日 22:22/ 0 赞/ 465 阅读