vue页面内部定位到锚点位置

谁践踏了优雅 2023-06-15 06:41 28阅读 0赞

**上个文章写了跨页面的锚点定位，锚点的页面是在mounted里调用的定位到锚点位置，只有新打开此页面时才会执行mounted，所以当前页面内进行点击定位到锚点位置不起作用，解决方法在main.js里的watch里一直监听着URL是否发生变化，如果URL变化就执行锚点定位方法。**

**效果：**

![20191120163750597.gif][]

**在mian.js中添加**

import \{goAnchor,GetQueryString\} from '../static/js/common.js';

new Vue(\{

el: '\#app',

router,

render: h => h(App),

mounted:function()\{//解决跳转到新页面不默认固定在顶部的bug

this.$router.afterEach((to, from, next) => \{

window.scrollTo(0, 0)

\})

\},

methods:\{

goAnchor,

GetQueryString,

\},

watch:\{

'$route.query':function(newVal,oldVal)\{

var maodian = newVal.maodian;

if(maodian)\{

this.goAnchor('\#'+maodian);

\}

\}

\}

\})

**mian.js中引入的common.js的内容**

//跳转到锚点

function goAnchor(selector) \{

console.info("selector1",selector)

var anchor = this.$el.querySelector(selector);//获取元素

console.info("anchor",anchor)

if(anchor) \{

setTimeout(()=>\{//页面没有渲染完成时是无法滚动的，因此设置延迟

//anchor.scrollIntoView(); //js的内置方法，可滚动视图位置至元素位置

var targetOffset=$(selector).offset().top;

console.info("targetOffset",anchor,targetOffset)

$('html,body').animate(\{

scrollTop: targetOffset

\},

1000);

\},500);

\}

\};

//获取参数

function GetQueryString(name)\{

//var reg = new RegExp("(^|&)" + name + "=(\[^&\]\*)(&|$)");

var href = window.location.href;

var r = getSearchString(name,href);

if (r != null) return decodeURI(r);

return null;

\}

function getSearchString(key, Url) \{

var str = Url;

str = str.substring(1, str.length);

if(str.indexOf("?")!=-1)\{

var arr = str.split("?")\[1\].split("&");// 获取？后的参数内容，并以&分隔字符串，获得类似name=xiaoli这样的元素数组

var obj = new Object();

// 将每一个数组元素以=分隔并赋给obj对象

for (var i = 0; i < arr.length; i++) \{

var tmp\_arr = arr\[i\].split("=");

obj\[decodeURIComponent(tmp\_arr\[0\])\] = decodeURIComponent(tmp\_arr\[1\]);

\}

return obj\[key\];

\}

\}

export \{

goAnchor,

GetQueryString

\}

[20191120163750597.gif]: https://img-blog.csdnimg.cn/20191120163750597.gif

发表评论取消回复

表情：

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

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

相关阅读

相关 vue页面内部定位到锚点位置

上个文章写了跨页面的锚点定位，锚点的页面是在mounted里调用的定位到锚点位置，只有新打开此页面时才会执行mounted，所以当前页面内进行点击定位到锚点位置不起作用，解决方

谁践踏了优雅/ 2023年06月15日 06:41/ 0 赞/ 29 阅读

相关 js 点击按钮,定位到页面指定位置

实现：点击bb按钮，定位到a7div位置 1、第一种方式： <!DOCTYPE html> <html> <head> <meta ht

冷不防/ 2023年06月12日 08:39/ 0 赞/ 45 阅读

相关锚点定位

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

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

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

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

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

相关 Markdown 页面内锚点跳转，跳转到指定位置

作者：LoveEmperor-王子様 Markdown 页面内锚点跳转，跳转到指定位置目录添加`[目录](id)`，`id`目标地点为锚点： ![在

电玩女神/ 2022年04月16日 00:17/ 0 赞/ 521 阅读

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

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

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

相关 MarkDown页面添加锚点,跳转到本页指定位置

MarkDown页面添加锚点,跳转到本页指定位置 -------------------- 目录 1. MarkDown页面内跳转测试 2. MarkDown

缺乏、安全感/ 2022年01月17日 06:45/ 0 赞/ 1097 阅读

相关 Vue锚点定位

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

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

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

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

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

相关 HTML 锚点定位

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

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