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使用锚点为啥会定位到锚点后立马又自动跳到页面顶部?哪里有问题?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用无效的 Django 表单跳转到锚点?

js如何实现进入页面后自动跳转到锚点

如何检测自动滚动到锚点?

我想要做一个锚点定位,从A页面跳到B页面的某个位置。

js实现进入页面后自动跳转到锚点

使用jquery滑动到锚点