Vue - 设置锚点，定位到固定位置

ゝ一世哀愁。 2021-07-25 22:43 664阅读 0赞

<template>
      <div class="wrap">
        <ul>
          <li><a href="javascript:void(0)" @click="goAuchor('#one')">第一</a></li>
          <li><a href="javascript:void(0)" @click="goAuchor('#two')">第二</a></li>
          <li><a href="javascript:void(0)" @click="goAuchor('#three')">第三</a></li>
          <li><a href="javascript:void(0)" @click="goAuchor('#four')">第四</a></li>
        </ul>
        <div id="one" class="one"></div>
        <div id="two" class="two"></div>
        <div id="three" class="three"></div>
        <div id="four" class="four"></div>
      </div>
    </template>
    
    <script>
    export default {
      methods:{
        goAuchor(id){
          console.log(id)
          document.querySelector(id).scrollIntoView(true)
          var auchor=this.$el.querySelector(id)
          console.log(auchor)
          console.log(auchor.getBoundingClientRect().top)
          document.body.scrollTop=auchor.offsetTop
        }
      }
    };
    </script>
    
    <style scoped>
    .wrap {
      width: 100%;
      height: 100%;
    }
    .one{
      width: 100%;
      height: 500px;
      background-color: red;
    }
    .two{
      width: 100%;
      height: 500px;
      background-color: blue;
    }
    .three{
      width: 100%;
      height: 500px;
      background-color: green;
    }
    .four{
      width: 100%;
      height: 500px;
      background-color: yellow;
    }
    ul{
      width: 100%;
      height: 30px;
      margin: 0;
      padding: 0;
    }
    li{
      list-style: none;
      float: left;
      background-color: rebeccapurple;
      height: 100%;
      margin-left: 50px;
      cursor: pointer;
    }
    </style>

发表评论取消回复

表情：

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

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

相关阅读

相关 js 锚点定位（在vue中的使用）

那么在vue下，使用ref获取DOM节点调用该方法，如下是vue3中使用。其次还可以配置动画效果，例如这样。

左手的ㄟ右手/ 2024年04月22日 15:06/ 0 赞/ 5 阅读

相关锚点定位

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

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

相关解决锚点被导航条固定定位遮住的方法

html部分： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

骑猪看日落/ 2022年11月28日 15:28/ 0 赞/ 236 阅读

相关 a标签跳转锚点到页面指定位置

代码如下： JS方式: <!DOCTYPE html> <html> <head> <meta charset="utf-

淩亂°似流年/ 2022年07月12日 06:21/ 0 赞/ 282 阅读

相关原生js模拟锚点，实现点击后，内容定位到本页的对应位置

原文地址：http://www.cnblogs.com/xiangming25/p/6078126.html 这时，如果我们使用锚点的方法就会存在一个问题，当我们点

约定不等于承诺〃/ 2022年06月10日 05:42/ 0 赞/ 315 阅读

相关使用a锚点跳转到页面指定位置

<a href="reviewDetails">查看审核详情</a> <h4 id="reviewDetails" class="font_bold">开题报告

末蓝、/ 2022年03月16日 10:00/ 0 赞/ 283 阅读

相关 Jquery锚点缓慢移动到目标位置

非常简单的代码，不需要再使用插件！页面代码如下 <!DOCTYPE html> <html> <head> <title>锚点缓

缺乏、安全感/ 2022年01月23日 14:59/ 0 赞/ 231 阅读

相关 Vue锚点定位

<div class="tab0" id="selector"> </div> 1.以下是js原生的scroll 滚动方式 //锚点

谁借莪１个温暖的怀抱￠/ 2021年09月24日 06:42/ 0 赞/ 389 阅读

相关 Vue - 设置锚点，定位到固定位置

<template> <div class="wrap"> <ul> <li><a href="javascript:v

ゝ一世哀愁。/ 2021年07月25日 22:43/ 0 赞/ 665 阅读

相关 HTML 锚点定位

链接`<a>`是最为常用的HTML元素之一，通过它可以将页面跳转到指定的地址。利用它非常便利的实现站内或者站际间页面跳转，有利于浏览者获取信息。首先看一段代码实例：

小灰灰/ 2020年05月15日 19:02/ 0 赞/ 775 阅读