markdown VUE-JS-平滑滚动

Posted 2021-05-05

<h1 class="h1 align-center pd-t20">h1.title</h1>
<section>
  <div class="inner">
    <div class="outer section-content">
      <h2 id="a" class="h2">A</h2>
      <hr>
    </div>
  </div> 
</section>

<div style="height: 1000px;"></div>

<section class="Content">
  <div class="inner">
    <div class="outer section-content">
      <h2 id="b" class="h2">B</h2>
      <hr>
    </div>
  </div> 
</section>

<div style="height: 1000px;"></div>

<section class="Content">
  <div class="inner">
    <div class="outer section-content">
      <h2 id="c" class="h2">C</h2>
      <hr>
    </div>
  </div> 
</section>

<div style="height: 1000px;"></div>

<div id="Smooth-scroll__jsApp">
  <transition>
    <div id="pagetop" v-show="scY > 300" class="cm0 flex flex-justify-c flex-align-c">
      <div class="d-ib">
        <a v-smooth-scroll href="#a">A</a>
        <a v-smooth-scroll href="#b">B</a>
        <a v-smooth-scroll href="#c">C</a>
      </div>
    </div>
  </transition>
</div>

new Vue({
  el: "#Smooth-scroll__jsApp",
  data: {
    scY: 0,
  },
  created: function () {
    window.addEventListener("scroll", this.scEvent)
  },
  methods: {
    scEvent: function() {
      this.scY = window.scrollY || window.pageYOffset
      //console.log(this.scY)
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
<script src="https://unpkg.com/vue2-smooth-scroll"></script>

body {
 height: 100vh;
}

/*==========================================================
ページトップへ
===========================================================*/
#pagetop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  //cursor: pointer;
  transition: all 0.6s;
  
   //出現動作に関係するのは此処より下
  &.v-enter,
  &.v-leave-to {
    opacity: 0;
    bottom: -10px;
  }
}

<link href="https://codepen.io/kote2kote/pen/bZMmgP.css" rel="stylesheet" />
<link href="https://codepen.io/kote2kote/pen/xBKqMP.css" rel="stylesheet" />

vue-js-smooth-scroll
--------------------


A [Pen](https://codepen.io/kote2kote/pen/MxzyWV) by [kote2](https://codepen.io/kote2kote) on [CodePen](https://codepen.io).

[License](https://codepen.io/kote2kote/pen/MxzyWV/license).