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

        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

}

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页