export default {
    inserted: function(el, binding) {
        el.onclick = function() {
            let total;
            if (binding.value == 0) {
                total = 0;
            } else {

                total = document.getElementById(`anchor-${binding.value}`).offsetTop;
            }
            let distance = document.documentElement.scrollTop || document.body.scrollTop;
            let step = total / 50;
            if (total > distance) {
                (function smoothDown() {
                    if (distance < total) {
                        distance += step;
                        document.documentElement.scrollTop = distance;
                        setTimeout(smoothDown, 5);
                    } else {
                        document.documentElement.scrollTop = total;
                    }
                })();
            } else {
                let newTotal = distance - total;
                step = newTotal / 50;
                (function smoothUp() {
                    if (distance > total) {
                        distance -= step;
                        document.documentElement.scrollTop = distance;
                        setTimeout(smoothUp, 5);
                    } else {
                        document.documentElement.scrollTop = total;
                    }
                })();
            }

        }
    }
}

1、封装一个anchor.js
2、在入口文件中定义
//定义锚点跳转
Vue.directive(‘anchor’, anchorFunc);
3、页面中使用方式
v-anchor = “传入的value”
使用例子:
这里写图片描述

Logo

前往低代码交流专区

更多推荐