Question

如何使用javascript滚动到网页中的元素？我想基本上创建使用<a href="#link"></a>时发生的相同事情，但是在javascript中使用函数。我不想使用任何jQuery，我目前正在将VueJS与Vuetify框架一起使用。我的导航如下：

<v-navigation-drawer
  persistent
  :mini-variant="miniVariant"
  :clipped="clipped"
  v-model="drawer"
  enable-resize-watcher
  fixed
  app
>
  <v-list>
    <v-list-tile
      value="true"
      v-for="(item, i) in items"
      :key="i"
      @click="navigate(item.link)"
    >
      <v-list-tile-action>
        <v-icon>{{ item.icon }}</v-icon>
      </v-list-tile-action>

      <v-list-tile-content>
        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
      </v-list-tile-content>
    </v-list-tile>
  </v-list>
</v-navigation-drawer>

如您所见，我已经设置了@click属性，但是我不知道如何实际滚动到ID链接，例如#info或#contact

Answer 1

我会谨慎使用doesn't work on all browsers和scrollIntoView。来自MDN网络文档。

这是一项实验技术在生产环境中使用此功能之前，请仔细检查浏览器兼容性表。

我建议使用轻量级的滚动脚本，例如smooth-scroll

Answer 2

如果您拥有该元素，则可以使用scrollIntoView。使用scrollIntoViewOptions，它也可以平滑滚动。

例如document.querySelector(item.link).scrollIntoView();

但是应该注意，在复制默认行为时，建议始终尽可能使用本机元素和默认行为来建议可访问性。这提供了用户已知和期望的交互，如使用定制实现通常会失去某些好处，例如键盘交互或屏幕阅读器快速操作

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Answer 3

document.getElementById('idhere').scrollIntoView();

使用javascript滚动到ID

3 个答案: