锚点导航小demo

锚点导航这种功能应该很常见，早之前就分享过移动端移动端导航简单实现，配合起来就很容易实现可移动的锚点导航，而且不是用hash模式。当然，PC端也能直接用。

先上效果：

为了方便直接用vue语法，首先要给每一个块一个唯一的ref，然后初始化的时候记录每一个块距离顶部的距离和每一个块的高度，并监听滚动：

this.$nextTick(() => {  
    this.firstOffsetTop = this.$refs[this.currentKey][0].offsetTop; 
    document.addEventListener('scroll', this.onScroll);  
    this.list.forEach((val) => {    
        this.itemOffsetTop.push({      
        key: val.key,      
        num: this.$refs[val.key][0].offsetTop - this.firstOffsetTop,      
        height: this.$refs[val.key][0].clientHeight    
        });  
    });
});

最重要的三个方法：

onScroll(){
        const scrollTop = document.documentElement.scrollTop;
        this.itemOffsetTop.forEach((val, index) => {
            if(scrollTop > val.num && scrollTop - val.num > val.height / 2){
                if(index == this.itemOffsetTop.length - 1){
                    this.currentKey = this.itemOffsetTop[index].key;
                }else {
                    this.currentKey = this.itemOffsetTop[index + 1].key;
                }
            }else if(scrollTop < this.itemOffsetTop[0].height / 2){
                this.currentKey = this.itemOffsetTop[0].key;
            }
        })
    },
    //点击锚点定位
    changeKey(key){
        document.removeEventListener('scroll', this.throttledScrollHandler);
        this.currentKey = key;
        let to = this.$refs[key][0].offsetTop - this.firstOffsetTop;
        this.animationScrollTo(document.documentElement, to);
    },
    //锚点定位动画滚动
    animationScrollTo(el, to) {
        let scrollY = 0;
        const beginY = el.scrollTop;
        const raf = window.requestAnimationFrame || (func => setTimeout(func, 10));
        const moveFn = () => {
            if (beginY - to < 0) {
                scrollY += (to - beginY) / 30;
                if(scrollY <= (to - beginY)){
                    el.scrollTop = beginY + scrollY;
                    raf(moveFn);
                }else {
                    el.scrollTop = to;
                    document.addEventListener('scroll', this.throttledScrollHandler);
                }
            }else if(beginY - to > 0){
                scrollY += (beginY - to) / 30;
                if(scrollY <= (beginY - to)){
                    el.scrollTop = beginY - scrollY;
                    raf(moveFn);
                }else {
                    el.scrollTop = to;
                    document.addEventListener('scroll', this.throttledScrollHandler);
                }
            }
        };
        raf(moveFn);
    }

先判断上滑还是下滑，每次滑动距离除以30，当作滑动的速度，这边注意一点，如果滑动距离为0的情况下是要处理的，否则滚动条会卡住，之前就是一个变量判断是否大于0，结果滚动条卡住了。滚动加点动画效果直接用requestAnimationFrame ，一般都兼容，如果不兼容就用定时器，定时器会比较不顺滑。

监听滚动计算滚动的距离是否大于记录的距离，且超过一半就算下一个，菜单上面定位到下一个。

完整demo：
https://github.com/wade3po/demoCode
锚点导航1.html是更简便，不过兼容性不一定更好。