vue-router和锚点冲突问题

传统的锚点定位会与vue-router中的路由设置存在冲突，都是使用'#'进行的，所以这里使用一直方法来模拟锚点跳转，并使用tween.js达到动态的过度效果

不使用原生锚点，使用这种方式解决

import '../static/js/animation.js'
import '../static/js/tween.js'

<a href="javascript:;" @click="anchor(dom)" class="title">xxxx</a>

 methods:{
    anchor:function(e){
      let id='anchor-'+e;
      let anchor=document.getElementById(id);
      let go=anchor.offsetTop;

      Math.animation(document.documentElement.scrollTop,go,600,'Quart.easeOut', function (value) {
          document.documentElement.scrollTop = value;        // animation为封装的方法
          document.body.scrollTop = value;  //兼容
      });
    }
  }           

animation.js

// 对运动方法进行封装
Math.animation = function (from, to, duration, easing, callback) {
    var isUndefined = function (obj) {
        return typeof obj == 'undefined';
    };
    var isFunction = function (obj) {
        return typeof obj == 'function';
    };
    var isNumber = function(obj) {
        return typeof obj == 'number';
    };
    var isString = function(obj) {
        return typeof obj == 'string';
    };
    
    // 转换成毫秒
    var toMillisecond = function(obj) {
        if (isNumber(obj)) {
            return     obj;
        } else if (isString(obj)) {
            if (/\d+m?s$/.test(obj)) {
                if (/ms/.test(obj)) {
                    return 1 * obj.replace('ms', '');
                }
                return 1000 * obj.replace('s', '');
            } else if (/^\d+$/.test(obj)) {
                return +obj;
            }
        }
        return -1;
    };
    
    if (!isNumber(from) || !isNumber(to)) {
        if (window.console) {
            console.error('from和to两个参数必须且为数值');    
        }
        return 0;
    }
    
    // 缓动算法
    var tween = Math.tween || window.Tween;
    
    if (!tween) {
        if (window.console) {
            console.error('缓动算法函数缺失');    
        }
        return 0;
    }
    
    // duration, easing, callback均为可选参数
    // 而且顺序可以任意
    var options = {
        duration: 300,
        easing: 'Linear',
        callback: function() {}
    };
    
    var setOptions = function(obj) {
        if (isFunction(obj)) {
            options.callback = obj;
        } else if (toMillisecond(obj) != -1) {
            options.duration = toMillisecond(obj);
        } else if (isString(obj)) {
            options.easing = obj;
        }
    };
    setOptions(duration);
    setOptions(easing);
    setOptions(callback);
    
    // requestAnimationFrame的兼容处理
    if (!window.requestAnimationFrame) {
        requestAnimationFrame = function (fn) {
            setTimeout(fn, 17);
        };
    }
    
    // 算法需要的几个变量
    var start = 0;
    // during根据设置的总时间计算
    var during = Math.ceil(options.duration / 17);
    
    // 当前动画算法
    // 确保首字母大写
    options.easing = options.easing.slice(0, 1).toUpperCase() + options.easing.slice(1);
    var arrKeyTween = options.easing.split('.');
    var fnGetValue;
    
    if (arrKeyTween.length == 1) {
        fnGetValue = tween[arrKeyTween[0]];
    } else if (arrKeyTween.length == 2) {
        fnGetValue = tween[arrKeyTween[0]] && tween[arrKeyTween[0]][arrKeyTween[1]];
    }
    if (isFunction(fnGetValue) == false) {
        console.error('没有找到名为"'+ options.easing +'"的动画算法');
        return; 
    }
    
    // 运动
    var step = function() {
        // 当前的运动位置
        var value = fnGetValue(start, from, to - from, during);
        
        // 时间递增
        start++;
        // 如果还没有运动到位，继续
        if (start <= during) {
            options.callback(value);
            requestAnimationFrame(step);
        } else {
            // 动画结束，这里可以插入回调...
            options.callback(to, true);
        }
    };
    // 开始执行动画
    step();
};           

最后

大家好，这里是「 TaoLand 」，这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客，希望和大家多多交流，一起成长！文章将会在下列地址同步更新……

个人博客：

www.yangyuetao.cn 小程序： TaoLand