Anchor navigation small demo

Anchor navigation should be a common feature. We have shared a simple implementation of mobile navigation, which makes it easy to implement mobile anchor navigation without using hash mode. Of course, PC can also be used directly.

First effect:

To make it easy to use vUE syntax directly, first give each block a unique ref, then initialize the distance from the top of each block and the height of each block, and listen for 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    
        });  
    });
});
Copy the code

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 anchor point positioning changeKey (key) {document. The removeEventListener (' scroll ', enclosing 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); }Copy the code

I’m going to go up or down, and I’m going to divide each slide distance by 30, which is the speed of the slide, and notice here, if the slide distance is 0, that’s what I’m going to do, otherwise the scrollbar is going to get stuck, and that was a variable to determine if it’s greater than 0, and the scrollbar is stuck. Use requestAnimationFrame directly to scroll and add animation effects, generally compatible, if not compatible use timer, timer will be more slippery.

Monitor scrolling to calculate whether the scrolling distance is greater than the recorded distance, and if more than half, the next menu is located on the next.

Complete the demo:

Github.com/wade3po/dem…

Anchor navigation 1.html is easier, but not necessarily more compatible.