mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-27 05:00:48 +08:00
Code Issues Packages Projects Releases Wiki Activity
d3d7f368b9
naive-ui/demo/documentation/components/anchor/zhCN/scrollto.demo.md
07akioni 487001d697 build: add changelog to site, refactor loader based on suffix 
.demo.md for component demo
.demo-entry.md for demo entry
.md for common docs
2020-08-19 23:30:04 +08:00

864 B
Raw Blame History

滚动到

<div style="height: 200px; padding-left: 200px;">
  <n-anchor affix :offset-top="24" :top="88" :bound="24" style="z-index: 1;" ref="anchor">
    <n-anchor-link title="演示" href="#演示">
      <n-anchor-link title="基础用法" href="#basic"/>
      <n-anchor-link title="忽略间隔" href="#ignore-gap"/>
      <n-anchor-link title="固定" href="#affix"/>
      <n-anchor-link title="滚动到" href="#scrollto"/>
    </n-anchor-link>
    <n-anchor-link title="Props" href="#Props" />
  </n-anchor>
</div>
<div style="padding-left: 400px;">
  <n-button @click="scrollTo('#basic')">基础用法</n-button>
  <n-button @click="scrollTo('#affix')">固定</n-button>
</div>

export default {
  methods: {
    scrollTo (href) {
      this.$refs.anchor.scrollTo(href)
    }
  }
}

.n-button {
  margin: 0 8px 12px 0;
}