vue锚点定位（代码通用） - 总结篇
vue锚点定位
（应用场景）
- 当前页面锚点
- 跨页面锚点
- hash模式下的锚点
- history模式下的锚点
应用前提：（重要的事情，说3+1遍）
任意场景、任意代码、任意框架都能对接！都能采用！都能通用
代码思路：
- 网上查了一番，实现方法各有差异。总结了一下都有很多不同的弊端，其中之一就是：万一锚点内容被导航栏遮盖了一部分怎么办？
现在全新方法来了，事先获得滚动的距离，再赋值给函数，以参数的形式，直接调用函数，在页面滚动触发动画特效，外加延时器，确保页面过渡时，有效执行锚点定位。而且可以随意设置定位位置。避免了被导航栏遮盖的诸多情况。
提示说明：
- footer底部
click一级栏目链接，在跳转（不算是锚点定位，应该说是一级栏目href链接）后的目标页，如何将该页面置顶的问题；- footer底部
click锚点链接，在跳转后的目标页，如何将该锚点位置置顶到设定的位置问题；
此处，页面内不需要定义锚点id="#maodian"的id类名，就能直接完成锚点功能。
具体代码 · 说明如下：
- 先将页面scroll置顶，再滚动到指定位置！
代码如下： （ footer.vue · 公共文件）
<template>
<div class="footer">
<div class="ftop">
<div class="ftop-content">
<div class="ftop-content-left">
<dl class="ftop-dl">
<dt class="icon"><a href="#/" @click="gotop(-10000)"><span class=" dl-index">span>首页a>dt>
<dd><a href="#/hhrr/hall" @click="gotop(-10000)">接单大厅a>dd>
<dd><a href="#/aboutUs" @click="gotop(-10000)">关于我们a>dd>
<dd><a href="#/ourModel" @click="goAnchor('catlink_zblc',-10000,10,1345,500,200)">招标流程a>dd>
<dd><a href="#/ourModel" @click="gotop(-10000)">服务优势a>dd>
dl>
<dl class="ftop-dl">
<dt class="icon"><a href="#/hr/hall" @click="gotop(-10000)"><span class=" dl-jddt">span>接单大厅a>dt>
dl>
<dl class="ftop-dl">
<dt class="icon"><a href="#/aboutUs" @click="gotop(-10000)"><span class="dl-about">span>关于我们a>dt>
<dd><a href="#/ourModel" @click="goAnchor('catlink_help',-10000,10,1920,500,200)">解决问题a>dd>
<dd><a href="#/ourModel" @click="goAnchor('catlink_about',-10000,10,600,500,200)">平台特色a>dd>
<dd><a href="#/" @click="goAnchor('catlink_rmfw',-10000,10,5020,500,200)">热门服务a>dd>
<dd><a href="#/" @click="goAnchor('catlink_cxjz',-10000,10,2200,500,200)">创新机制a>dd>
<dd><a href="#/" @click="goAnchor('catlink_khly',-10000,10,1550,500,200)">客户来源a>dd>
<dd><a href="#/" @click="goAnchor('catlink_wmdqd',-10000,10,4270,500,200)">我们的渠道a>dd>
<dd><a href="#/" @click="goAnchor('catlink_fffs',-10000,10,2900,500,200)">付费方式a>dd>
dl>
<dl class="ftop-dl">
<dt class="icon"><a href="#/ourModel" @click="goAnchor('catlink_zblc',-10000,10,1345,500,200)"><span class="dl-zplc">span>招标流程a>dt>
<dd><a href="#/ourModel" @click="goAnchor('catlink_lct',-10000,10,1345,500,200)">流程图a>dd>
<dd><a href="#/" @click="goAnchor('catlink_feel',-10000,10,6140,500,200)">使用感受a>dd>
<dd><a href="#/" @click="goAnchor('catlink_zptp',-10000,10,870,500,200)">录招图谱a>dd>
dl>
<dl class="ftop-dl">
<dt class="icon"><a href="#/ourModel" @click="gotop(-10000)"><span class="dl-mode">span>服务优势a>dt>
<dd><a href="#/ourModel" @click="goAnchor('catlink_tese',-10000,10,3200,500,200)">我们的特色a>dd>
<dd><a href="#/ourModel" @click="goAnchor('catlink_wmdyd',-10000,10,618,500,200)">我们的优点a>dd>
<dd><a href="#/ourModel" @click="goAnchor('catlink_msdb',-10000,10,2500,500,200)">模式对比a>dd>
<dd><a href="#/ourModel" @click="gotop(-10000)">服务优势a>dd>
<dd><a href="#/ourModel" @click="goAnchor('catlink_mscj',-10000,10,4218,500,200)">模式场景a>dd>
<dd><a href="#/" @click="goAnchor('catlink_ddzh',-10000,10,7100,500,200)">订单转化a>dd>
dl>
div>
<div class="ftop-content-right">
<dl class="ftop-dl" style="margin-right:30px;">
<dd class="icon dl-fwrx"><a><span>span>全国服务热线a>dd>
<dd style="padding-left:28px;"><a>012-666666666a>dd>
<dd style="padding-left:28px;"><a>13612345678 a>dd>
<dd class="icon dl-zxsj" style="margin-top:20px;"><a><span>span>咨询时间a>dd>
<dd style="padding-left:28px;"><a>09：00-18：00 a>dd>
dl>
<dl class="ftop-dl">
<dd style="padding-bottom:28px;">
<img src="../../../static/images/footer/logo.png" alt="logo">
dd>
<dd style="text-align:center;margin-top:20px:">
<img src="../../../static/images/footer/code.png" alt="二维码">
dd>
dl>
div>
div>
div>
<div class="wd1200">
<div class="copyright">Copyright © 2011-2019 Tolang Tech - Powered by 某某某优线公司 <a style="color: #494949; text-decoration: none" href="http://www.beian.miit.gov.cn">京ICP备123456789a>div>
div>
div>
template>
<script>
import $ from 'jquery'
export default {
name: 'newfooter',
data () {
return {
}
},
mounted:function (){
// 监听：背景/图片动画
window.addEventListener('scroll', this.handleScroll, true);
},
methods:{
// 滚动监听 · 动画播放
handleScroll: function(){
let scrollHeight = $(window).scrollTop(); // 滚动条的滚动行程
//滚动条滚动到对应的板块显示
// console.log("重要参考："+scrollHeight); //【【此处用于获取锚点所在的页面高度值，便于函数goAnchor中参数offetTopHeight的取值设定】】
},
gotop(topheight){
this.scrollTo(-10000, 200); //先reset页面滚动置顶，再执行下面的定位
},
goAnchor (selector,scrollTopHeight,scrollTopTime,offetTopHeight,offetToptime,clockTime) {
/* selector: id锚点名称、
* scrollTopHeight: 页面初始化置顶·滚动距离、（默认设置为-10000 ，默认单位px）
* scrollTopTime: 页面初始化置顶·执行时间、（默认设置为10 ，默认单位ms毫秒）
* offetTopHeight: 锚点所处的页面高度、（具体设置参考页面滚动时定义返回的offsetTop参数，默认单位ms毫秒）
* offetToptime: 锚点置顶·执行时间、
* clockTime: 延时器设定（延时执行锚点定位）
*/
//具体执行的动画定义
//scrollTopHeight = -scrollTopHeight;//页面置顶时，滚动距离（默认设置为-10000，负值代表向上滚动）
this.scrollTo(scrollTopHeight, scrollTopTime); //先reset页面滚动置顶，再执行下面的定位
window.setInterval((this.scrollTo(offetTopHeight, offetToptime)),clockTime);//设定定时器
},
scrollTo (y, duration) {
/* y:目标纵坐标，duration:时间(单位ms毫秒) */
var scrollTop = document.body.scrollTop /* 页面当前滚动距离 */
var distance = y - scrollTop /* 结果若大于0,说明目标在下方；若小于0,说明目标在上方 */
var scrollCount = duration / 10 /* 10毫秒滚动一次,计算滚动次数 */
var everyDistance = parseInt( distance / scrollCount ) /* 滚动距离除以滚动次数计算每次滚动距离 */
for (
var index = 1;
index <= scrollCount;
index++ /* 循环设置scrollBy事件,在duration之内,完成滚动效果 */
) {
setTimeout(function () {
window.scrollBy(0, everyDistance)
}, 10 * index)
}
let deviation = y - scrollCount * everyDistance
window.scrollBy(0, deviation)
}
}
}
script>
- 上述代码，仅供互联网学习参考，本人已经进行函数改造。
- 适当封装就可以在任意场景下使用锚点定位！
希望对各位有帮助！ 顺手点个赞，让我知道文章对你还有价值！
后期，博主会发布一系列资源，供有志之士学习参阅。
大家可以多多关注，后续会有更多学习资源奉上！
截图示下：
· 其他文章 · 参阅
- https://segmentfault.com/q/1010000007888351
- 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
附件 · 可忽略代码：
<style scoped>
/* Footer Copyright 版权信息*/
.max-wd1200{max-width: 1200px;margin: 0 auto;}
.wd1200{width: 1200px;margin: 0 auto;}
.footer{background: #000000;}
.footer .ftop{width:100%;height: auto;background:url(../../../static/images/bg-footer.jpg) no-repeat center top;background-size: 100% 100%;}
.footer .ftop .ftop-content{width: 1200px;margin: 0 auto;padding: 50px 0;display: inline-block;}
/* 版权 */
.copyright{font-size: 14px;border-top: #494949 1px solid;line-height: 60px;color:#494949;}
/* 列表 */
.footer .ftop .ftop-content .ftop-content-left{float: left;width: 745px;box-sizing: border-box;border-right: 1px solid #666;}
.footer .ftop .ftop-content .ftop-content-right{float: right;width: ;}
.footer .ftop .ftop-content dl{float: left;min-width: 130px;text-align: left;}
.footer .ftop .ftop-content dl dd {padding: 3px 0;font-size: 14px;}
.footer .ftop .ftop-content dl .icon{margin-bottom: 15px;}
.footer .ftop .ftop-content dl .icon a{color: rgba(255, 255, 255, .5);}
.footer .ftop .ftop-content dl dd a{color: #FFF;}
.footer .ftop .ftop-content dl .icon span{display: inline-block;width: 30px;height:28px;padding-bottom: 0;}
.dl-index{background: url(../../../static/images/footer/index.png) no-repeat center bottom;}
.dl-mode{background: url(../../../static/images/footer/mode.png) no-repeat center bottom;}
.dl-about{background: url(../../../static/images/footer/about.png) no-repeat center bottom;}
.dl-zplc{background: url(../../../static/images/footer/zplc.png) no-repeat center bottom;}
.dl-jddt{background: url(../../../static/images/footer/jddt.png) no-repeat center bottom;}
.footer .ftop .ftop-content dl .dl-fwrx a,.footer .ftop .ftop-content dl .dl-zxsj a{font-size: 16px;}
.dl-fwrx{background: url(../../../static/images/footer/fwrx.png) no-repeat left 12px;}
.dl-zxsj{background: url(../../../static/images/footer/zxsj.png) no-repeat left 12px;}
.footer .ftop .ftop-content .ftop-content-left dl dd{padding-left: 30px;}
style>
以上就是关于“ vue锚点定位（代码通用） - 总结篇 ” 的全部内容。