vue锚点定位（代码通用）

vue锚点定位（应用场景）

当前页面锚点

跨页面锚点

hash模式下的锚点

history模式下的锚点

应用前提：`（重要的事情，说3+1遍）`

任意场景、任意代码、任意框架
都能对接！
都能采用！
都能通用

代码思路：

网上查了一番，实现方法各有差异。总结了一下都有很多不同的弊端，其中之一就是：万一锚点内容被导航栏遮盖了一部分怎么办？
现在全新方法来了，事先获得滚动的距离，再赋值给函数，以参数的形式，直接调用函数，在页面滚动触发动画特效，外加延时器，确保页面过渡时，有效执行锚点定位。而且可以随意设置定位位置。避免了被导航栏遮盖的诸多情况。

提示说明：

footer底部click 一级栏目链接，在跳转（不算是锚点定位，应该说是一级栏目href链接）后的目标页，如何将该页面置顶的问题；

footer底部click 锚点链接，在跳转后的目标页，如何将该锚点位置置顶到设定的位置问题；
此处，页面内不需要定义锚点id="#maodian" 的id类名，就能直接完成锚点功能。

具体代码 · 说明如下：

先将页面scroll置顶，再滚动到指定位置！

代码如下：（ `footer.vue` · 公共文件）

<template><!-- Footer 版权信息 --><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><!-- <dd><a href="">AAAA级</a></dd><dd><a href="">BBBB级</a></dd><dd><a href="">CCCC级</a></dd><dd><a href="">DDDD级</a></dd> --></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-666666666</a></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备123456789</a></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 * everyDistancewindow.scrollBy(0, deviation)}}
}
</script>

上述代码，仅供互联网学习参考，本人已经进行函数改造。

适当封装就可以在任意场景下使用锚点定位！

希望对各位有帮助！顺手点个赞，让我知道文章对你还有价值！

后期，博主会发布一系列资源，供有志之士学习参阅。

大家可以多多关注，后续会有更多学习资源奉上！

截图示下：

· 其他文章 · 参阅

https://segmentfault.com/q/1010000007888351

原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

附件 · 可忽略代码：

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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锚点定位（代码通用） - 总结篇 ” 的全部内容。

vue锚点定位（代码通用） - 总结篇相关推荐

vue 锚点定位 tab切换
废话不说下面直接上代码和说明我们这想要实现tab切换时候页面自动滚动定位到锚点位置,因为这个是单页面引用,也没有使用a标签等,使用的是最普通的方法,仅供大家参考. //要实现切换的三个tab项 & ...
jquery锚点定位
jquery实现锚点定位功能这里主要是通过jquery实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能 $leftnav为左侧楼层导航栏(left-nav),右侧right-conten ...
html增加锚点,html增加锚点定位
第一种方法,也是最简单的方法是锚点用标签,在href属性中写入DIV的id.如下: div { height: 800px; width: 400px; border: 2px solid black ...
微信小程序基于scroll-view实现锚点定位
代码地址如下: http://www.demodashi.com/demo/14009.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
mui组件 a 锚点定位（Demo案例演示）- 代码篇
文章目录 `从踩坑,入坑,到跳出坑`:mui框架(在mui-scroll中如何进行页内锚点跳转) `那么,用什么方法实现锚点跳转?` `思路就是:` - 我们可以使用另外一种MUI组件,即:`(顶部选 ...
vue中实现锚点定位
vue中实现锚点定位通过监听滚动事件,高亮显示锚点按钮添加点击事件,根据锚点滚动至对应区域并实现平滑滚动这里主要是实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能如果是获取浏览器的 ...
vue、uniapp实现锚点定位
1.vue 点击页面定位到指定位置锚点跳转方法 html部分: <template><div class="home"><div class=&qu ...
（自定义组件）通用- X轴横向：溢出滚动（含代码）- 案例篇
(自定义组件)通用- X轴横向:溢出滚动 (含代码)- 案例篇移动端和pc端通用效果截图: 实例代码: <!DOCTYPE html> <html><head> ...
Vue中如何正常使用锚点定位？
问题: 项目中会有一些功能需要用到锚点定位,比如文章目录.点击标题跳转到正文内容等等.但vue的路由设置默认为hash模式,正常使用a标签的锚点定位,在浏览器刷新/后退/前进时,路由会匹配不上,导致页 ...

vue锚点定位（代码通用） - 总结篇

应用前提：`（重要的事情，说3+1遍）`

代码思路：

代码如下：（ `footer.vue` · 公共文件）

截图示下：

· 其他文章 · 参阅

附件 · 可忽略代码：

vue锚点定位（代码通用） - 总结篇相关推荐

最新文章

热门文章

vue锚点定位（代码通用） - 总结篇

应用前提：（重要的事情，说3+1遍）

代码思路：

代码如下： （ footer.vue · 公共文件）

截图示下：

· 其他文章 · 参阅

附件 · 可忽略代码：

vue锚点定位（代码通用） - 总结篇相关推荐

最新文章

热门文章

应用前提：`（重要的事情，说3+1遍）`

代码如下：（ `footer.vue` · 公共文件）