js实现简单锚点

将页面滚动到指定区域

通过scrollIntoView()来实现,将页面滚动到指定元素区域

<div id="box"></div>

let boxDom = document.querySelector('#box');
boxDom.scrollIntoView({ behavior: "smooth" });

点击回到顶部

<div @click="scrollToTop"></div>

scrollToTop() {
            
      // let top =   document.documentElement.scrollTop || document.body.scrollTop ; 距离顶部距离

      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
},

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3可以通过使用路由和锚点的组合来实现内容锚点。具体步骤如下: 1. 首先,我们需要在Vue项目中安装Vue Router,可以使用命令`npm install vue-router`来进行安装。 2. 在Vue应用程序的入口文件中,一般是`main.js`中,引入Vue Router并配置路由。具体配置可以参考Vue Router的官方文档。 3. 在需要使用内容锚点的页面中,可以使用`<router-link>`组件来创建锚点链接。例如,我们可以在页面的导航栏中添加锚点链接,点击链接后可以跳转到指定内容。 4. 在需要跳转到的具体内容位置,在对应的元素上添加`id`属性,作为锚点的标识。 5. 在页面中使用`<router-view>`组件来渲染路由对应的内容。当点击锚点链接后,路由会根据配置自动匹配到相应的内容并进行渲染。 下面是一个简单的示例: ```html <!-- App.vue --> <template> <div> <nav> <router-link to="/#section1">Section 1</router-link> <router-link to="/#section2">Section 2</router-link> </nav> <router-view></router-view> </div> </template> <script> import { createApp } from 'vue'; import { createRouter, createWebHistory } from 'vue-router'; const routes = [ { path: '/', component: Home }, ]; const router = createRouter({ history: createWebHistory(), routes, }); const app = createApp(App); app.use(router); app.mount('#app'); </script> <!-- Home.vue --> <template> <div> <h1 id="section1">Section 1</h1> <p>Content of section 1...</p> <h1 id="section2">Section 2</h1> <p>Content of section 2...</p> </div> </template> ``` 在上面的代码中,我们创建了一个导航栏,其中的链接中通过添加锚点实现页面内跳转。并通过Vue Router进行路由配置,然后在主组件中使用`<router-view>`组件来显示对应的内容。在Home组件中,我们通过给标题和内容元素添加`id`属性来创建锚点标识。这样点击导航栏中的链接后,页面会滚动到对应的锚点位置,并显示该内容。 通过以上步骤,我们可以简单实现Vue3中的内容锚点效果。当然,你也可以根据具体需求进行更多的样式和交互的优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值