html使用锚点为啥会定位到锚点后立马又自动跳到页面顶部?哪里有问题?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html使用锚点为啥会定位到锚点后立马又自动跳到页面顶部?哪里有问题?相关的知识,希望对你有一定的参考价值。
参考技术A 可能的原因页面有其他锚点使用了相同的name值
js,或jq设置了scrollTop函数本回答被提问者采纳
Vue路由器导航或滚动到锚点(#锚点)
【中文标题】Vue路由器导航或滚动到锚点(#锚点)【英文标题】:Vue Router navigate or scroll to anchors (# anchors) 【发布时间】:2021-04-08 20:34:02 【问题描述】:我正在为vue-router
不滚动/导航到锚标签而苦苦挣扎(例如:#anchor
)。我在 Stack Overflow 上阅读了各种解决方案,但到目前为止都没有奏效。
请在下面找到我现在正在使用的代码,它不起作用:
main.js
const router = createRouter(
history: createWebHistory(),
routes: [
path: "/docs/1.0/:title",
component: Content,
name: "docs"
],
scrollBehavior(to, from, savedPosition)
if (savedPosition)
return savedPosition;
if (to.hash)
return selector: to.hash ;
return x: 0, y: 0 ;
,
);
Content.vue(父组件)
<template>
<base-section
v-for="entry in $store.state.entries"
:key="entry.title"
lang="lang-markup"
:title="entry.title"
>
<template v-slot:sectionId>
<div :id="slugify(entry.title)"></div>
</template>
<template v-if="entry.content" v-slot:content>
<span v-html="entry.content"></span>
</template>
<template v-slot:examples>
<div v-html="entry.examples"></div>
</template>
<template v-slot:code>
entry.code
</template>
</base-section>
</template>
SectionMenu.vue(子组件)
<span v-for="item in $store.state.entries" :key="item.title">
<router-link
:to="name:'docs', hash:'#'+slugify(item.title)"
class="mx-1 btn btn-primary"
> item.title </router-link>
</span>
我也尝试了不同的方法,但也没有奏效。这就是方法:
<button @click.prevent="navigate(item.title)">item.title</button>
navigate(route)
this.$router.push(name:'docs', hash:'#'+this.slugify(route))
,
你知道我做错了什么吗?
PS:我使用的是 VUE 3 (vue CLI 4.5.8)
【问题讨论】:
【参考方案1】:在 Vue Router 4 中,从 scrollBehavior()
返回的对象的格式与 Vue Router 3 中的不同。特别是,对象的 selector
属性现在命名为 el
,如 @ 所示987654321@:
const router = createRouter(
scrollBehavior(to, from, savedPosition)
if (to.hash)
// BEFORE:
// return selector: to.hash
return el: to.hash
,
)
demo
【讨论】:
以上是关于html使用锚点为啥会定位到锚点后立马又自动跳到页面顶部?哪里有问题?的主要内容,如果未能解决你的问题,请参考以下文章