前言

回到顶部，相信大家都不陌生吧，这个功能可谓是随处可见，也是作为一名前端开发工程师手到擒来的一个功能点。但前几天刚刚好有一个类似于回到顶部（锚点）的功能点把我卡住了，就是点击锚点按钮页面滚到对应位置。如果说直接显示到对应位置那可真是太简单了，但过程需要点过渡的动画就难到我了，硬生生做了两个小时（说到底还是自己技术不过关）。

需求

点击锚点按钮页面带过渡动画显示到对应位置

HTML

因后期需实现页面滚动到对应位置时锚点高亮，故使用 View Design 框架的步骤条实现锚点按钮样式，为后期功能实现打好基础。

<Steps class="Steps" direction="vertical"><Step status="wait" class="stepItem" :key="index" @click.native="changAnchor(item)" v-for="(item, index) in teacherData.groupList" :content="item.groupName"></Step>
</Steps>

失败思路

首次实现时的思路是，如果目前的滚动条高度大于锚点盒子顶部距离页面顶部的高度，便以每10毫秒的速度往上滚（减20），同理若小于则往下滚（加20）。等两则高度相等时则结束此方法（清除计时器），注意 ：一定要清除计时器。（此思路存在问题，好奇的同学可以先思考一下错在哪再往下看）。

失败方法

/*** changAnchor 点击切换锚点* (this.$refs['scroll'] as any).wrap.scrollTop为本项目自己编写的一个页面滚动条，故此代码不能直接copy复用。* 此处代码有些庸余，本应该在计时器前声明一下(this.$refs['scroll'] as any).wrap.scrollTop，但声明之后报了一下莫名其妙的错误，就没有继续往下深究。*/changAnchor(item: any){if(this.clickShow === true){this.clickShow = false // 用于判断上一次滚动是否执行完毕，如若不执行完毕不执行下一次滚动，否则多次点击动画会出现错乱const targetbox: any = document.getElementById(item.firstStepId); // 获取对应锚点盒子const target = targetbox.offsetTop - 110;this.timeTop = setInterval(() => {if((this.$refs['scroll'] as any).wrap.scrollTop > target){(this.$refs['scroll'] as any).wrap.scrollTop -= 20}if((this.$refs['scroll'] as any).wrap.scrollTop < target) {(this.$refs['scroll'] as any).wrap.scrollTop += 20}if((this.$refs['scroll'] as any).wrap.scrollTop === target){clearInterval(this.timeTop);this.clickShow = true}}, 1);}}

失败思路解析

细心的同学可能就会发现这个方法的漏洞，相加相减实现它的动画效果没毛病，但以每次20为间距来相加相减，若此时相加后或者相减后的最后一次距离小于20，那再执行一次相加相减岂不是刚好跳过了它们相等时的值？此时函数会继续往下执行，页面便会一直向上滚或者往下滚，并且因为没有清除计时器边永久执行此方法。

可行思路

继续延用上诉的思路，但在此基础上进行优化。当相加或相减的距离小于20时，将滚动条高度直接赋值成锚点盒子的高度。

可行方法

/*** changAnchor 点击切换锚点*/changAnchor(item: any){if(this.clickShow === true){this.clickShow = false // 用于判断上一次滚动是否执行完毕，如若不执行完毕不执行下一次滚动，否则多次点击动画会出现错乱const targetbox: any = document.getElementById(item.firstStepId); // 获取对应锚点盒子const target = targetbox.offsetTop - 110;this.timeTop = setInterval(() => {if((this.$refs['scroll'] as any).wrap.scrollTop > target + 20){(this.$refs['scroll'] as any).wrap.scrollTop -= 20} else if((this.$refs['scroll'] as any).wrap.scrollTop <= target +20 && (this.$refs['scroll'] as any).wrap.scrollTop >= target){(this.$refs['scroll'] as any).wrap.scrollTop = target}if((this.$refs['scroll'] as any).wrap.scrollTop < target - 20) {(this.$refs['scroll'] as any).wrap.scrollTop += 20} else if((this.$refs['scroll'] as any).wrap.scrollTop >= target - 20 && (this.$refs['scroll'] as any).wrap.scrollTop <= target){(this.$refs['scroll'] as any).wrap.scrollTop = target}if((this.$refs['scroll'] as any).wrap.scrollTop === target){clearInterval(this.timeTop);this.clickShow = true}}, 1);}}

效果图：

总结

本题的思路其实跟循环差不多，只是单纯的把循环事件变成计时器来使用，所以其他同学若是感兴趣也可以试着使用循环的方式来实现。

点击按钮页面滚动到对应位置（锚点）相关推荐

jQuery-点击按钮页面滚动到顶部，底部，指定位置
$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); //页面滚动至顶部$('.s ...
js控制页面滚动到指定位置，js中scrollIntoView()的用法
js中scrillIntoView()的用法--页面滚动到指定位置最近遇到一个问题,在一个页面上,点击某个按钮时,滚动到页面的某一位置. 如图: 如果是我写的话,我可能会先获取滚动到的元素,然后获取 ...
使用jQuery实现点击按钮页面下滑一定距离
使用jQuery实现点击按钮页面下滑一定距离在页面中添加 <script>$(".anniu").click(function(){var h=$(window) ...
JQ：当页面滚动到一定位置之后，让元素固定在顶部，小于位置后恢复原来的位置
项目背景: 一天小虎找到龙哥说,龙哥你有没有现成的JS板子,就是那种当页面滚动到某个位置时,页面中的某个元素则固定在顶部不在滚动,而小于这个位置之后这个元素又恢复到原来的状态. 实现:这里做了一个简单 ...
layui让当前页面刷新_layui点击按钮页面会自动刷新的解决方案
问题: Title 输入框 test layui.use(['laytpl','jquery','layer','form'],function () { var laytpl = layui.lay ...
SwiftUI ScrollView 高级技巧之 01 单击按钮手动滚动到某个位置
实战需求 SwiftUI ScrollView 高级技巧之 01 单击按钮手动滚动到某个位置开发过程中,有时开发人员希望以编程方式滚动到特定位置,或者希望从下到上滚动,例如聊天视图.交易视图等,我们 ...
页面滚动到指定位置导航栏固定顶部
做一个网页时经常会用到导航栏,导航栏对于一个网站来说,地位是举足轻重的,在用到导航栏时,我们经常会用到一个效果,就是当页面滑动到一定的位置时,导航栏需要固定在页面的顶部,这是怎么实现的呢? 下面的代码 ...
IOS 页面跳转问题：点击按钮页面不跳转
问题:每次运行模拟器进入(登录页面->我的页面->注销)没有问题,但是注销后回到登录页面,再点击登录就没有反应了. AppDelegate: LoginViewController *lo ...
jquery页面滚动显示浮动菜单栏锚点定位效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <metahttp-equiv="Content-Type"c ...

点击按钮页面滚动到对应位置（锚点）

前言

需求