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

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

效果：

在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) => {

扫描二维码关注公众号，回复： 12058550 查看本文章

        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

}