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/enUS/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

844 B
Raw Blame History

Scroll To

<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="Demos" href="#Demos">
      <n-anchor-link title="Basic" href="#basic"/>
      <n-anchor-link title="Ignore-Gap" href="#ignore-gap"/>
      <n-anchor-link title="Affix" href="#affix"/>
      <n-anchor-link title="Scroll To" 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')">Basic</n-button>
  <n-button @click="scrollTo('#affix')">Affix</n-button>
</div>

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

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