点击导航下拉跳转页面固定位置（锚链接）

最新推荐文章于 2023-11-17 12:25:08 发布

qq_41241767

最新推荐文章于 2023-11-17 12:25:08 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue点击导航下拉跳转页面固定位置（锚链接）

本文链接：https://blog.youkuaiyun.com/qq_41241767/article/details/90211827

vue 专栏收录该内容

60 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的锚点跳转方法，通过在导航页面中创建锚链接，可以实现在跳转页面时直接定位到指定位置。这种方法适用于多页面应用，能够提升用户体验，特别是在内容丰富的长页面中效果显著。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击导航下拉跳转页面固定位置（锚链接）

在导航页面文件夹里面新建anchor.js

//锚点跳转
function goAnchor(selector) {
    var anchor = this.$el.querySelector(selector);//获取元素
    if (anchor) {
        setTimeout(() => {//页面没有渲染完成时是无法滚动的，因此设置延迟
            anchor.scrollIntoView(); //js的内置方法，可滚动视图位置至元素位置
        }, 1000);
    }
};
//获取参数
function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
}

export {
    goAnchor,
    GetQueryString
}

点击页面

<ul>
              <router-link
                to="/product#baobaoxiang"
                href="#baobaoxiang"
              >
                <li>宝宝箱</li>
              </router-link>
              <router-link
                to="/product#xixinweiyang"
                href="#xixinweiyang"
              >
                <li>悉心喂养</li>
              </router-link>
              <router-link
                to="/product#tiexinhuli"
                href="#tiexinhuli"
              >
                <li>贴心护理</li>
              </router-link>
              <router-link
                to="/product#nuanxinfushi"
                href="#nuanxinfushi"
              >
                <li>暖心服饰</li>
              </router-link>
            </ul>

跳转页面
a标签就放在页面要跳转的位置

跳转页面a标签里面对应的id为点击页面的to后面的#后面的和href后面的
 <router-link  to="/product#nuanxinfushi"  href="#nuanxinfushi">
<a id="nuanxinfushi"></a>