html5_锚点,点击到相应的位置

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul li{
            list-style: none;
            float: left;
            margin: 10px;
        }
    </style>
</head>
<body>

 <ul>
     <!-- 点击到相应的位置 ,根据id-->
     <li><a href="#a">首页</a></li>
     <li><a href="#b">新闻</a></li>
     <li><a href="#c">体育</a></li>
     <li><a href="#d">游戏</a></li>
 </ul>
//清除浮动
<div style="clear: both">
    <a id="a"></a>
    <h2>首页</h2>
    <hr>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

 <div>
     <a id="b"></a>
     <h2>新闻</h2>
     <hr>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 </div>

 <div>
     <a id="c"></a>
     <h2>体育</h2>
     <hr>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 </div>

 <div>
     <a id="d"></a>
     <h2>游戏</h2>
     <hr>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 </div>

</body>
</html>
要将 Vant 中的(Anchor)定位到指定位置,你可以使用 `scrollTo` 方法。以下是一个简单的示例: ```html <template> <div> <van-anchor :offset-top="60"> <van-anchor-link href="#section1" title="Section 1"></van-anchor-link> <van-anchor-link href="#section2" title="Section 2"></van-anchor-link> <van-anchor-link href="#section3" title="Section 3"></van-anchor-link> </van-anchor> <div id="section1" style="height: 300px; background-color: #f9f9f9; margin-bottom: 20px;"> Section 1 </div> <div id="section2" style="height: 300px; background-color: #f9f9f9; margin-bottom: 20px;"> Section 2 </div> <div id="section3" style="height: 300px; background-color: #f9f9f9;"> Section 3 </div> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const anchor = ref(null); const scrollToSection = (sectionId) => { const section = document.getElementById(sectionId); if (section) { anchor.value.scrollTo(section); } }; return { anchor, scrollToSection }; } }; </script> ``` 在上面的示例中,我们使用了 Vant 的 `van-anchor` 和 `van-anchor-link` 组件来创建导航。`offset-top` 属性用于设置距离顶部的偏移量,以便在滚动时固定导航栏。`scrollToSection` 方法接收一个参数 `sectionId`,它会将相应的部分滚动到视图中。 通过调用 `anchor.value.scrollTo(section)`,我们可以将指定的部分滚动到可见区域。请确保在调用 `scrollToSection` 方法之前,`anchor` 已经正确地引用了 `van-anchor` 组件的实例。 这样,当你点击链接时,页面会自动滚动到对应的部分。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值