首页
学习
活动
专区
工具
TVP
发布

导航

导航这种功能应该很常见,早之前就分享过移动端移动端导航简单实现,配合起来就很容易实现可移动的导航,而且不是hash模式。当然,PC端也能直接。 先上效果: ?...为了方便直接vue语法,首先要给每一个块一个唯一的ref,然后初始化的时候记录每一个块距离顶部的距离和每一个块的高度,并监听滚动: this....this.itemOffsetTop[0].height / 2){ this.currentKey = this.itemOffsetTop[0].key; } }) }, //点击点定位...this.throttledScrollHandler); } } }; raf(moveFn); } 先判断上滑还是下滑,每次滑动距离除以30,当作滑动的速度,这边注意一,...滚动加点动画效果直接requestAnimationFrame ,一般都兼容,如果不兼容就用定时器,定时器会比较不顺滑。

2.6K10
您找到你想要的搜索结果了吗?
是的
没有找到

【第012期】如何设置页面

早在第二期,我们就介绍了链接元素,那么这一期我们就来说说页面中的。...类似图中这种页面,就可以通过点来设置。下面我们具体说一下元素。 有两种形式,都可以实现相同的效果,只是标记的方式不同。...第一种:使用 a 元素 使用 a 元素标记的位置,假设你希望某个链接打开后跳到 index_02 的位置,那么就在 index_02 的位置加一个: ?...当然,你还可以跳到某个网页的指定位置,比如下面的链接就会跳到页面的第二处位置: http://st.midea.com/act/score/index_pc.html#a2 正常情况下,页面跳到每个时都会自动把当前位置拉到窗口最顶部...还有一种比较常见的情况,就是页面中靠下的几个,跳过去的时候可能不会自动滚到页面的顶部。 这是因为页面的长度可能已经到头了,页面的底部不会自动拉出空白,被页面底部“拽”住了。

2.1K30

htmlid属性和name属性

最近对模板更新时用到了这一,举例说一下 复制代码 // a.html 点击跳转到第一个 点击跳转到第二个...需要有一个,这个就是我们要跳转到的位置。...一般情况下,我们会在目标节点上添加id属性或者name属性,这个id或者name属性的值就是我们寻找的依据,推荐使用id属性来标记(因为id能够在各种标签上使用,name属性标记时只能用在a...a标签用作时,href的值是的id值或者name值。...同一页面内的跳转时,给href赋值# + id的值或者# + name的值,需要跳转其他页面的位置时,需要在#前面加上跳转的路径,例如:href="b.html#two"

25060

htmlid属性和name属性

第一个 // b.html 第二个 如上所示,实现描效果,需具备两个要素: 需要有一个,这个就是我们要跳转到的位置...一般情况下,我们会在目标节点上添加id属性或者name属性,这个id或者name属性的值就是我们寻找的依据,推荐使用id属性来标记(因为id能够在各种标签上使用,name属性标记时只能用在a...标签上) 需要一个触发跳转的a标签。...a标签用作时,href的值是的id值或者name值。...同一页面内的跳转时,给href赋值# + id的值或者# + name的值,需要跳转其他页面的位置时,需要在#前面加上跳转的路径,例如:href="b.html#two"

9210
领券