当前位置:网站首页>Anchor navigation demo
Anchor navigation demo
2022-07-05 13:50:00 【wade3po】
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 .
边栏推荐
- Personal component - message prompt
- 我为什么支持 BAT 拆掉「AI 研究院」
- stm32逆向入门
- Programmer growth Chapter 8: do a good job of testing
- Operational research 68 | the latest impact factors in 2022 were officially released. Changes in journals in the field of rapid care
- 【公开课预告】:视频质量评价基础与实践
- Log4j utilization correlation
- Could not set property 'ID' of 'class xx' with value 'XX' argument type mismatch solution
- Laravel框架运行报错:No application encryption key has been specified
- 【华南理工大学】考研初试复试资料分享
猜你喜欢
Embedded software architecture design - message interaction
jasypt配置文件加密|快速入门|实战
【云资源】云资源安全管理用什么软件好?为什么?
Liar report query collection network PHP source code
The real king of caching, Google guava is just a brother
【华南理工大学】考研初试复试资料分享
RK3566添加LED
搭建一个仪式感点满的网站,并内网穿透发布到公网 2/2
Could not set property 'ID' of 'class xx' with value 'XX' argument type mismatch solution
研究生可以不用学英语?只要考研英语或六级分数高!
随机推荐
内网穿透工具 netapp
Require, require in PHP_ once、include、include_ Detailed explanation of the efficiency of repeated introduction of once class library
"Baidu Cup" CTF competition in September, web:upload
Ueditor + PHP enables Alibaba cloud OSS upload
Those things I didn't know until I took the postgraduate entrance examination
4年工作经验,多线程间的5种通信方式都说不出来,你敢信?
Kotlin协程利用CoroutineContext实现网络请求失败后重试逻辑
Request + BS4 crawl Netease cloud music popular comments
网络安全-HSRP协议
Prefix, infix, suffix expression "recommended collection"
运筹说 第68期|2022年最新影响因子正式发布 快看管科领域期刊的变化
锚点导航小demo
Idea remote debugging agent
TortoiseSVN使用情形、安装与使用
蓝桥杯学习2022.7.5(上午)
法国学者:最优传输理论下对抗攻击可解释性探讨
几款分布式数据库的对比
uplad_ Labs first three levels
zabbix 监控
Can graduate students not learn English? As long as the score of postgraduate entrance examination English or CET-6 is high!