<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//unpkg.com/vue@2.1.4/dist/vue.js"></script>
    <script src="//unpkg.com/vue-smooth-scroll@1.0.11"></script>
  </head>
  <body>
    <div id="app">
    <ul>
      <li>
        <a href="#section1" v-smooth-scroll v-smooth-scroll="{ duration: 1000, offset: -50 }">セクション1</a>
      </li>
      <li>
        <a href="#section2" v-smooth-scroll v-smooth-scroll="{ duration: 1000, offset: -50 }">セクション2</a>
      </li>
      <li>
        <a href="#section3" v-smooth-scroll v-smooth-scroll="{ duration: 1000, offset: -50 }">セクション3</a>
      </li>
    </ul>
    <div id="section1">
      セクション1のコンテンツ
    </div>
    <div id="section2">
      セクション2のコンテンツ
    </div>
    <div id="section3">
      セクション3のコンテンツ
    </div>
    <div v-scroll="handleScroll" :class="{visible: visible}">
      <a href="#top" v-smooth-scroll>トップへ戻る</a>
    </div>
  </div>
  <script src="script.js"></script>
  </body>
</html>




Vue.use(VueSmoothScroll)
Vue.directive('scroll', {
  inserted: function(el, binding) {
    let f = function(evt) {
      if (binding.value(evt, el))
      {
        window.removeEventListener('scroll', f)
      }
    };
    window.addEventListener('scroll', f)
  }
});
const app = new Vue({
  el: '#app',
  data: {
    visible: false
  },
  methods: {
    handleScroll() {
      this.visible = window.pageYOffset > 150;
    }
  }
});





ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
}
li:not(:first-child) {
  margin-left: 20px;
}
li a {
  text-decoration: none;
  color: tomato;
  border: 1px solid;
  padding: 4px;
}
#app {
  height: 1000px;
  padding-top: 50px;
}
#section1,
#section2,
#section3{
  height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#section1,
#section3 {
  background: #cc0;
}
#section2 {
  background: #eee;
}
a[href="#top"] {
  position: fixed;
  bottom: 50px;
  right: 10px;
  z-index: 100;
  text-decoration: none;
  background: tomato;
  color: #fff;
  padding: 10px 20px;
}