vue跨页面锚点跳转

偏执的太偏执、 2021-12-10 07:39 547阅读 0赞

> **从theindex.vue跳转到investment.vue,**`红色部分就是写入的地方`

> theindex.vue

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70]![在这里插入图片描述][20190713113307190.png]

> investment.vue

![在这里插入图片描述][20190713113404968.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20190713155014691.png]

方法二：[文章来源][Link 1]

需要注意的是，各浏览器下获取 scrollTop 有所差异

Chrome： document.body.scrollTop

Firefox： document.documentElement.scrollTop

methods: {
        goAnchor(selector) {
            var anchor = this.$el.querySelector(selector) // 参数为要跳转到的元素id,是(#id)
            document.body.scrollTop = anchor.offsetTop; // chrome
            document.documentElement.scrollTop = anchor.offsetTop; // firefox
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190713113237773.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA==,size_16,color_FFFFFF,t_70
[20190713113307190.png]: /images/20211210/b96968fab97a4b609688ba84d38fdce9.png
[20190713113404968.png]: https://img-blog.csdnimg.cn/20190713113404968.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 1]: /images/20211210/2bbaab016eae46b49c64fab71418f391.png
[20190713155014691.png]: /images/20211210/6383858adb4940c6ba49cbd611b879eb.png
[Link 1]: https://blog.csdn.net/lwx931449660/article/details/82972447