锚点导航小demo

·  阅读 665

锚点导航这种功能应该很常见,早之前就分享过移动端移动端导航简单实现,配合起来就很容易实现可移动的锚点导航,而且不是用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.onScroll);
        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.onScroll);
                }
            }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.onScroll);
                }
            }
        };
        raf(moveFn);
    }
复制代码

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

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

完整demo:

github.com/wade3po/dem…

锚点导航1.html是更简便,不过兼容性不一定更好。

分类:
前端
标签: