Anchor navigation demo

Anchor navigation should be a common feature , I have shared the simple implementation of mobile terminal navigation long ago , Together, it is easy to achieve mobile anchor navigation , And not with hash Pattern . Of course ,PC The end can also be used directly .

The first effect ：

For the convenience of direct use vue grammar , First, give each block a unique ref, Then, when initializing, record the distance between each block and the top and the height of each block , And monitor scrolling ：

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    
        });  
    });
});

The three most important methods ：

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;
            }
        })
    },
    // Click the anchor to locate 
    changeKey(key){
        document.removeEventListener('scroll', this.throttledScrollHandler);
        this.currentKey = key;
        let to = this.$refs[key][0].offsetTop - this.firstOffsetTop;
        this.animationScrollTo(document.documentElement, to);
    },
    // Anchor positioning animation scrolling 
    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);
    }

First judge whether to slide up or down , Divide each sliding distance by 30, As the speed of sliding , Pay attention here , If the sliding distance is 0 In this case, it is necessary to deal with , Otherwise, the scroll bar will get stuck , Before that, it is a variable to judge whether it is greater than 0, As a result, the scroll bar got stuck . Scroll and add some animation effects directly requestAnimationFrame , Generally compatible , If not, use a timer , The timer will be less smooth .

Monitor the scrolling and calculate whether the scrolling distance is greater than the recorded distance , And more than half is the next , Navigate to the next... Above the menu .

complete demo：
https://github.com/wade3po/demoCode
Anchor navigation 1.html Is easier , But compatibility is not necessarily better .