1, 问题
由于 vue 路由 hash 模式在 url 中已经将 #占用, 页面上的 #已经不具备 hash 锚点功能.
2,JS 实现带动画的锚点定位
- goAnchor (selector) {
- var anchor = document.querySelector(selector)
- // 没有动画
- // document.documentElement.scrollTop = anchor.offsetTop
- // 有动画
- this.scrollTo(anchor.offsetTop, 500)
- },
- scrollTo (y, duration) {
- /* y: 目标纵坐标, duration: 时间 (毫秒) */
- 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 () {
- Windows.scrollBy(0, everyDistance)
- }, 10 * index)
- }
- let deviation = y - scrollCount * everyDistance
- Windows.scrollBy(0, deviation)
- }
html:
<span class="anchor anchor1 active" @click="goAnchor('#anchor1')">
首页
</span>
来源: http://www.bubuko.com/infodetail-3357445.html