Vue监听滚动实现锚点定位(双向)示例


Posted in Javascript onNovember 13, 2019

在项目需求中需要实现一个滚轴联动锚点的功能

效果图如下:

Vue监听滚动实现锚点定位(双向)示例

功能代码demo如下:

<template>
 <div class="container">
  <div class="wrapper">
   <div class="section" style="height:500px;width:100%" v-for="(item, index) in list" :key="index" :style="{'height':index==0?'1000px':'500px'}">
    <div style="width:100%;height:100%;font-size:30px;text-align:center;font-weight:bold;color:#fff;" :style="{'background':item.backgroundcolor}">{{item.name}}</div>
   </div>
  </div>
  <div id="nac" style="height:500px;"></div>
  <nav style="position:fixed;right:30px;top:300px;">
  <a class="nav1" v-for="(item, index) in navList" :key="index" @click="jump(index)" :class="index==0?'current':''">{{item}}</a>
  </nav>
 </div>
</template>
<script>
 export default {
  data(){
   return {
    scroll: '',
    list: [{
    name: "第一条",
    backgroundcolor: "#90B2A3"
    }, {
    name: "第二条",
    backgroundcolor: "#A593B2"
    }, {
    name: "第三条",
    backgroundcolor: "#A7B293"
    }, {
    name: "第四条",
    backgroundcolor: "#0F2798"
    }, {
    name: "第五条",
    backgroundcolor: "#0A464D"
    }],
    navList: [1, 2, 3, 4, 5]
   }
  },
  methods: {
   dataScroll: function () {
    this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
   },
   jump(index) {
    let jump = document.getElementsByClassName('section');
    // 获取需要滚动的距离
    let total = jump[index].offsetTop;
    // Chrome
    document.body.scrollTop = total;
    // Firefox
    document.documentElement.scrollTop = total;
    // Safari
    window.pageYOffset = total;
    // $('html, body').animate({
    // 'scrollTop': total
    // }, 400);
   },
   loadSroll: function () {
    var self = this;
    var $navs = $(".nav1");
    var sections = document.getElementsByClassName('section');
    for (var i = sections.length - 1; i >= 0; i--) {
     if (self.scroll >= sections[i].offsetTop - 100) {
      $navs.eq(i).addClass("current").siblings().removeClass("current")
      break;
     }
    }
   }
  },
  watch: {
   scroll: function () {
    this.loadSroll()
   }
  },
  mounted() {
   window.addEventListener('scroll', this.dataScroll);
  }
 }
</script>

<style>
 * {
 padding: 0;
 margin: 0;
 }
 .nav1 {
  display: block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: #eee;
  margin: 10px 0;
 }
 .current {
  color: #fff;
  background: red;
 }
</style>

以上这篇Vue监听滚动实现锚点定位(双向)示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
DWR Ext 加载数据
Mar 22 Javascript
JavaScript 事件的一些重要说明
Oct 25 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
vue项目中锚点定位替代方式
Nov 13 #Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 #Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 #jQuery
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 #Javascript
jquery获取input输入框中的值
Nov 13 #jQuery
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 #Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 #Javascript
You might like
单点登录 Ucenter示例分析
2013/10/29 PHP
DOM基础教程之事件对象
2015/01/20 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
深入理解Javascript中的this关键字
2015/03/27 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
django 将自带的数据库sqlite3改成mysql实例
2020/07/09 Python
python 两种方法删除空文件夹
2020/09/29 Python
python3中编码获取网页的实例方法
2020/11/16 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
联想德国官网:Lenovo Germany
2018/07/04 全球购物
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
公司企业表扬信
2014/01/11 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
2014年工会工作总结
2014/11/12 职场文书
年会主持人开场白台词
2015/05/29 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS