如何自己实现锚点跳转

已于 2023-09-11 16:57:49 修改
阅读量92 收藏
点赞数
文章标签： 前端 javascript html
于 2023-09-11 16:53:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_fu_gui_ya/article/details/132811392
版权

前言：在做项目中，由于使用的Vue1+iview1.0.1版本，版本过于老旧，无法使用业务中需要的锚点，经过借鉴自己创建一个Vue1可以使用的锚点跳转组件

首先安装需要用到的依赖

yarn add throttle-debounce

affix.vue 固定组件

<template>
  <div ref="placeholder" class="affix-placeholder" :style="placeholderStyle">
    <div class="affix" :style="affixStyle">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { throttle } from "throttle-debounce";
import { getTargetRect, getFixedTop } from "../../utils/dom";

const events = ["scroll", "resize"];

export default {
  data() {
    return {
      eventHandler: throttle(16, this.updatePosition.bind(this)),
      placeholderStyle: {},
      affixStyle: {},
      affixContainer: null,
    };
  },
  props: {
    getContainer: {
      type: Function,
      default: () => window,
    },
    offsetTop: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    getContainer(val) {
      let newTarget = null;
      if (val) {
        newTarget = val() || null;
      }
      if (this.affixContainer !== newTarget) {
        events.forEach(
          (event) =>
            this.affixContainer &&
            this.affixContainer.removeEventListener(event, this.eventHandler)
        );
        events.forEach(
          (event) =>
            newTarget && newTarget.addEventListener(event, this.eventHandler)
        );
        this.updatePosition();
        this.affixContainer = newTarget;
      }
    },
    offsetTop() {
      this.updatePosition();
    },
  },
  methods: {
    updatePosition() {
      const $container = this.getContainer();
      const $placeholder = this.$refs.placeholder;
      if (!$container || !$placeholder) {
        return;
      }
      const containerRect = getTargetRect($container);
      const placeholderRect = getTargetRect($placeholder);
      const fixedTop = getFixedTop(
        placeholderRect,
        containerRect,
        this.offsetTop
      );
      if (fixedTop !== undefined) {
        this.affixStyle = {
          position: "fixed",
          top: fixedTop,
          width: placeholderRect.width + "px",
          height: placeholderRect.height + "px",
        };
        this.placeholderStyle = {
          width: placeholderRect.width + "px",
          height: placeholderRect.height + "px",
        };
      } else {
        this.affixStyle = {};
        this.placeholderStyle = {};
      }
    },
  },
  ready() {
    setTimeout(() => {
      this.affixContainer = this.getContainer();
      events.forEach(
        (event) =>
          this.affixContainer &&
          this.affixContainer.addEventListener(event, this.eventHandler)
      );
    }, 0);
  },
  beforeDestroy() {
    events.forEach(
      (event) =>
        this.affixContainer &&
        this.affixContainer.removeEventListener(event, this.eventHandler)
    );
  },
};
</script>

anchor-link.vue 锚点item项

<template>
  <div class="anchor-link">
    <slot name="title">
      <a
        :href="href"
        :target="target"
        :title="title"
        class="anchor-link__title"
        :class="bizAnchorActiveLink === href ? 'is-active' : ''"
        @click="handleClick"
      >
        {{ title }}
      </a>
    </slot>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "AnchorLink",
  props: {
    title: {
      type: String,
      default: "",
    },
    href: {
      type: String,
      default: "",
    },
    target: {
      type: String,
      default: "",
    },
  },
  watch: {
    href(val, oldVal) {
      setTimeout(() => {
        this.bizAnchor.unregisterLink(oldVal);
        this.bizAnchor.registerLink(val);
      }, 0);
    },
  },
  data() {
    return {
      bizAnchor: null,
    };
  },
  computed: {
    bizAnchorActiveLink() {
      return this.$parent.bizAnchorActiveLink;
    },
  },
  beforeDestroy() {
    this.bizAnchor.unregisterLink(this.href);
  },

  ready() {
    this.bizAnchor = this.getBizAnchor();
    this.bizAnchor.registerLink(this.href);
  },
  methods: {
    handleClick(e) {
      this.bizAnchor.scrollTo(this.href);
      this.$emit("click", e, { title: this.title, href: this.href });
    },
    getBizAnchor() {
      return this.$parent.getBizAnchor();
    },
  },
};
</script>

anchor.vue 锚点链接主组件

css三个组件的样式全在里面

<template>
  <affix v-if="affix" :offset-top="offsetTop" :get-container="getContainer">
    <div class="anchor">
      <div
        v-if="showInk"
        :class="['anchor-ink', inkHeight === '0px' ? '' : 'visible']"
        :style="{ top: inkPositionTop, height: inkHeight }"
      ></div>
      <slot></slot>
    </div>
  </affix>
  <div v-else class="anchor">
    <div
      v-if="showInk"
      class="anchor-ink"
      :style="{ top: inkPositionTop, height: inkHeight }"
    ></div>
    <slot></slot>
  </div>
</template>

<script>
import { throttle } from 'throttle-debounce';
import { getScrollTop, getOffsetTop, scrollTo } from "../../utils/dom";
import Affix from "./affix.vue";

const sharpMatcherRegx = /#([^#]+)$/;

export default {
  name: "Anchor",
  components: {
    Affix,
  },
  data() {
    return {
      links: [],
      scrollContainer: window,
      animating: false,
      inkPositionTop: "",
      inkHeight: "0px",
      bizAnchorActiveLink: "",
    };
  },
  props: {
    affix: {
      type: Boolean,
      default: true,
    },
    bounds: {
      type: Number,
      default: 5,
    },
    getContainer: {
      type: Function,
      default: () => window,
    },
    offsetTop: {
      type: Number,
      default: 0,
    },
    showInk: {
      type: Boolean,
      default: true,
    },
    targetOffset: {
      type: Number,
    },
    getCurrentAnchor: {
      type: Function,
      default: null,
    },
  },
  methods: {
    scrollTo(link) {
      const { offsetTop, getContainer, targetOffset } = this;

      this.setCurrentActiveLink(link);
      const container = getContainer();
      const scrollTop = getScrollTop(container);

      const sharpLinkMatch = sharpMatcherRegx.exec(link);
      if (!sharpLinkMatch) {
        return;
      }

      const targetElement = document.getElementById(sharpLinkMatch[1]);
      if (!targetElement) {
        return;
      }

      const eleOffsetTop = getOffsetTop(targetElement, container);
      let y = scrollTop + eleOffsetTop;
      y -= targetOffset !== undefined ? targetOffset : offsetTop || 0;
      this.animating = true;

      scrollTo(y, {
        callback: () => {
          this.animating = false;
        },
        getContainer,
      });
    },

    handleScroll() {
      if (this.animating) {
        return;
      }
      const currentActiveLink = this.getCurrentActiveLink(
        this.targetOffset !== undefined
          ? this.targetOffset
          : this.offsetTop || 0,
        this.bounds
      );
      this.setCurrentActiveLink(currentActiveLink);
    },

    setCurrentActiveLink(link) {
      this.bizAnchorActiveLink = link;
      setTimeout(() => {
        const linkNode = this.$el.parentElement.getElementsByClassName("is-active")[0];
        if (linkNode) {
          this.inkPositionTop = `${linkNode.offsetTop}px`;
          this.inkHeight = `${linkNode.clientHeight}px`;
        } else {
          this.inkHeight = "0px";
        }
      }, 0);
    },

    getCurrentActiveLink(offsetTop = 0, bounds = 5) {
      if (typeof this.getCurrentAnchor === "function") {
        return this.getCurrentAnchor();
      }

      const activeLink = "";
      if (typeof document === "undefined") {
        return activeLink;
      }

      const linkSections = [];
      const { getContainer } = this;

      const container = getContainer();
      this.links.forEach((link) => {
        const sharpLinkMatch = sharpMatcherRegx.exec(link.toString());
        if (!sharpLinkMatch) {
          return;
        }
        const target = document.getElementById(sharpLinkMatch[1]);
        if (target) {
          const top = getOffsetTop(target, container);
          if (top < offsetTop + bounds) {
            linkSections.push({
              link,
              top,
            });
          }
        }
      });

      if (linkSections.length) {
        const maxSection = linkSections.reduce((prev, curr) =>
          curr.top > prev.top ? curr : prev
        );
        return maxSection.link;
      }
      return "";
    },
    getBizAnchor() {
      const registerLink = (link) => {
        if (!this.links.includes(link)) {
          this.links.push(link);
        }
      };
      const unregisterLink = (link) => {
        this.links = this.links.filter((item) => item !== link);
      };
      const scrollTo = this.scrollTo.bind(this);
      return {
        registerLink,
        unregisterLink,
        scrollTo,
      };
    },
  },
  ready() {
    this.scrollHandLer = throttle(30, this.handleScroll.bind(this));

    setTimeout(() => {
      this.scrollContainer = this.getContainer();
      if (this.scrollContainer) {
        this.scrollContainer.addEventListener("scroll", this.scrollHandLer);
      }
      const sharpLinkMatch = sharpMatcherRegx.exec(window.location.href);
       if (!sharpLinkMatch) {
          return;
      }
      this.scrollTo(sharpLinkMatch[0]);
    }, 500);
  },

  beforeDestroy() {
    if (this.scrollContainer) {
      this.scrollContainer.removeEventListener("scroll", this.scrollHandLer);
    }
  },
};
</script>
<style lang="less">
.anchor {
  position: relative;
  border-left: 1px solid #ccc;

  &-ink {
    position: absolute;
    left: -1px;
    top: 0;
    width: 1px;
    height: 32px;
    background: #2e6be6;
    transition: top 0.3s, height 0.3s;
  }
  .visible::after {
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    content: "";
    top: 50%;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #2e6be6;
  }

  &-link {
    .anchor-link {
      padding-left: 16px;
    }
  }

  &-link__title {
    padding-left: 16px;
    display: inline-block;
    font-size: 12px;
    color: #666;
    height: 32px;
    line-height: 32px;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    transition: color 0.3s;
    width: 100%;

    &.is-active {
      color: #2e6be6;
      // background: #E6EEFF;
    }

    &:hover {
      color: #2e6be6;
    }
  }
}
</style>

dom.js 具体使用的js

export function easeInOutCubic(t, b, c, d) {
  const cc = c - b;
  t /= d / 2;
  if (t < 1) {
    return (cc / 2) * t * t * t + b;
  }
  return (cc / 2) * ((t -= 2) * t * t + 2) + b;
}

export function getScroll(target, fromTop) {
  if (typeof window === "undefined") {
    return 0;
  }
  const prop = fromTop ? "pageYOffset" : "pageXOffset";
  const method = fromTop ? "scrollTop" : "scrollLeft";
  let ret = target instanceof Window ? target[prop] : target[method];
  if (target instanceof Window && typeof ret !== "number") {
    ret = window.document.documentElement[method];
  }
  return ret;
}

export function getScrollTop(target) {
  return getScroll(target, true);
}

export function scrollTo(y, options = {}) {
  const { getContainer = () => window, callback, duration = 450 } = options;

  const container = getContainer();
  const scrollTop = getScrollTop(container);
  const startTime = Date.now();

  const frameFunc = () => {
    const timestamp = Date.now();
    const time = timestamp - startTime;
    const nextScrollTop = easeInOutCubic(
      time > duration ? duration : time,
      scrollTop,
      y,
      duration
    );
    if (container instanceof Window) {
      window.scrollTo(window.pageXOffset, nextScrollTop);
    } else {
      container.scrollTop = nextScrollTop;
    }
    if (time < duration) {
      requestAnimationFrame(frameFunc);
    } else if (typeof callback === "function") {
      callback();
    }
  };
  requestAnimationFrame(frameFunc);
}

export function getOffsetTop(element, container) {
  if (!element) {
    return 0;
  }

  if (!element.getClientRects().length) {
    return 0;
  }

  const rect = element.getBoundingClientRect();

  if (rect.width || rect.height) {
    if (container instanceof Window) {
      container = element.ownerDocument.documentElement;
      return rect.top - container.clientTop;
    }
    return rect.top - container.getBoundingClientRect().top;
  }

  return rect.top;
}

export function getTargetRect(target) {
  return target instanceof Window
    ? { top: 0, bottom: window.innerHeight }
    : target.getBoundingClientRect();
}

export function getFixedTop(placeholderRect, containerRect, offsetTop) {
  if (
    offsetTop !== undefined &&
    containerRect.top > placeholderRect.top - offsetTop
  ) {
    return offsetTop + containerRect.top + "px";
  }
  return undefined;
}

具体如何使用

基础使用方法：

<template>
  <anchor>
    <anchor-link href="#shiyong" title="使用" />
    <anchor-link href="#yongfa" title="用法" />
    <anchor-link href="#xin-ye-mian" target="_blank" title="新页面" />
    <anchor-link title="API" href="#API">
      <anchor-link href="#props" title="Props" />
      <anchor-link href="#slots" title="Slots" />
    </anchor-link>
  </anchor>
</template>

指定容器使用方法：

<template>
  <anchor :get-container="getContainer">
    <anchor-link href="#shiyong" title="使用" />
    <anchor-link href="#yongfa" title="用法" />
    <anchor-link href="#xin-ye-mian" target="_blank" title="新页面" />
    <anchor-link title="API" href="#API">
      <anchor-link href="#props" title="Props" />
      <anchor-link href="#slots" title="Slots" />
    </anchor-link>
  </anchor>
</template>

<script>
  export default {
    methods: {
      getContainer() {
        return document.body;
      }
    }
  }
</script>
Attributes
参数说明类型默认值
affix

固定模式

booleantrue
getContainer指定滚动的容器() => HTMLElement() => HTMLElement
getCurrentAnchor自定义高亮的锚点() => stringnull
wrapperClass容器的类名string-
wrapperStyle容器样式object-

Link Props
参数说明类型默认值
href锚点链接string-
target该属性指定在何处显示链接的资源。string-
title

文字内容

stringslot

结语小提示：如果想要在vue2中也使用此代码，可将ready换成mounted，setTimeout换成this.$nextTick，由于vue1无法使用provide，更换比较麻烦可忽略。

最后祝愿大家钱多事少快乐摸鱼~

wang_fu_gui_ya
关注
实现锚点跳转
webchang的博客
04-13 3528
页面内使用锚点进行跳转
微信小程序实现锚点跳转
weixin_45879374的博客
11-09 496
微信小程序实现锚点跳转
小程序实现锚点跳转
JavaScritp
12-02 1241
小程序实现锚点跳转（非scroll-view实现） 通过点击事件跳转到指定的位置，在HTML中很容易实现。但在小程序中一般需要借助scroll-view组件来实现，而scroll-view在实现效果时，需要指定固定的高，但大多数时候我们不知道最终要显示的有多高，动态计算也比较麻烦。有没有其它的办法实现这种滚动效果呢？当然是有的。 通过给跳转位置绑定id类名的方式（类名必须是id），就可以实现，具体...
vue中实现锚点跳转
SHERLOCK_96的博客
05-29 651
html <div ref="example"></div> //要跳转的位置 <button @click="goAnchor('example')"></button> //点击跳转按钮 js goAnchor(selector) { this.$refs["example"].scrollIntoView(true); },
小程序如何实现锚点跳转的效果？
Dark_programmer的博客
06-13 536
小程序如何实现锚点跳转的效果
前端页面锚点跳转
qq_45600228的博客
01-04 666
vue3 html5 点击跳转锚点
【前端】HTML锚点跳转实现
RogerQianpeng的博客
05-23 2725
0 前言 本文用简单的<a>标签实现页面内、跨页面的锚点跳转。 更复杂的含有跳转、滚动动画的锚点跳转，本文中尚未更新。 1 原理说明 在要跳转处，添加<a href="#anchor-specific"> anchor from </a>标签 在锚点出，添加<div id="anchor-specific"> anchor to<div>id 每个以 # 开头的链接 href 值都指向拥有相应 id （不含 #） 的元素 点击<a&gt
html跳转过度,jq实现锚点跳转过度
weixin_34862004的博客
06-09 282
jq实现锚点跳转过度2020年10月29日|萬仟网IT编程 |我要评论jq实现锚点跳转过渡例子：当我们浏览页面想回到页面顶部时，点击按钮会回到想要去到的锚点。1、数据内容(html) 跳转 ......jq实现锚点跳转过渡例子：当我们浏览页面想回到页面顶部时，点击按钮会回到...
uniapp 锚点跳转
asd2437252087的博客
11-28 326
【代码】uniapp 锚点跳转。
JS如何实现在页面上快速定位（锚点跳转问题）
10-19
2. 实现锚点跳转的方式：主要通过a标签配合name或href属性，以及元素的id属性实现。 3. URL中“#”的使用：标识链接指向页面中的某个位置。 4. Jquery的animate()方法：实现平滑滚动到指定位置的效果。 5. 解决特定...
微信小程序 scroll-view 实现锚点跳转功能
01-19
　实现锚点跳转主要以下几点： 　1、最外层容器使用 scroll-view 　2、赋值scroll-into-view，如： 　3、设置 scroll-view 滚动方向 scroll-y=”true” 　4、跳转到的位置使用 id (定位)，如： <view class=lis
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 1105
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
Vue根实例、实例总结
最新发布
m0_54007573的博客
10-04 438
Vue根实例、实例总结
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1156
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
登录功能开发 P167重点
2303_81204446的博客
09-30 408
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 5953
Webpack 打包后文件过大，如何优化？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1211
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
实现JavaScript锚点平滑跳转的技巧
"本文介绍了如何使用JavaScript实现锚点(Anchor)间的平滑跳转，通过这种方法，用户可以在页面的各个部分之间优雅地导航，避免传统锚点瞬间跳转带来的不适感。这种方法适用于内容丰富的长页面，有助于提升用户体验。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值