markdown VUE组分滚动

Posted 2021-05-05

<div class="main cm0 flex flex-justify-c flex-align-c">
  <div class="d-ib">
    <a href="#a">A</a>
    <a href="#b">B</a>
    <a href="#c">C</a>
  </div>
</div>
<div class="main2 outer cm0 flex flex-justify-c flex-align-c">
  <div class="d-ib">
    <a href="#a" class="js-smooth-scroll">A</a>
    <a href="#b" class="js-smooth-scroll">B</a>
    <a href="#c" class="js-smooth-scroll">C</a>
  </div>
</div>
<div class="main3 outer cm0 flex flex-justify-c flex-align-c">
  <div class="d-ib">
    <a href="#a" class="js-smooth-scroll2">A</a>
    <a href="#b" class="js-smooth-scroll2">B</a>
    <a href="#c" class="js-smooth-scroll2">C</a>
  </div>
</div>
<div class="main4 outer cm0 flex flex-justify-c flex-align-c">
  <div class="d-ib">
    <a href="#a" class="">A</a>
    <a href="#b" class="js-smooth-scroll3">B</a>
    <a href="#c" class="js-smooth-scroll3">C</a>
  </div>
</div>


<h1 class="h1 align-center pd-t20">h1.title</h1>
<section id="jsApp--hello" class="Section-hello">
  <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="jsApp--pagetop-link" v-cloak>
  <transition>
		<div id="pagetop" v-show="scY > 300" @click="toTop">
			To Top
		</div>
	</transition>
</div>

//scrollIntoViewでスクロール
/*
対応ブラウザが限られる
https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView
*/
document.addEventListener("click", e => {
  const target = e.target;
  // clickした要素がclass属性、js-smooth-scrollを含まない場合は処理を中断
  if (!target.classList.contains("js-smooth-scroll")) return;
  e.preventDefault();
  const targetId = target.hash;
  document.querySelector(targetId).scrollIntoView({
    behavior: "smooth",
    block: "start"
  });
});


//window.scrollでスクロール

// import smoothscroll from "smoothscroll-polyfill";

// // kick off the polyfill!
// smoothscroll.polyfill();

document.addEventListener("click", e => {
  const target = e.target;
  // clickした要素がclass属性、js-smooth-scrollを含まない場合は処理を中断
  if (!target.classList.contains("js-smooth-scroll2")) return;
  e.preventDefault();
  const targetId = target.hash;
  const targetElement = document.querySelector(targetId);
  // 画面上部から要素までの距離
  const rectTop = targetElement.getBoundingClientRect().top;
  // 現在のスクロール距離
  const offsetTop = window.pageYOffset;
  // スクロール位置に持たせるバッファ
  const buffer = 50;
  const top = rectTop + offsetTop - buffer;

  window.scrollTo({
    top,
    behavior: "smooth"
  });
});

// smooth scrollを使う スマホまで動くのを確認。IE11もOKらしいがまだ検証中。
// var scroll = new SmoothScroll('a[href*="#"], [data-scroll]',{
//   offset: 50
// });


//実践はこれがいいかも。
//vueでボタン関連の制御。スクロールはjqueryのanimate scroll

new Vue({
  el: "#jsApp--pagetop-link",
  data: {
    scY: 0,
  },
  created() {
    window.addEventListener("scroll", this.scEvent);
  },
  methods: {
    toTop: function () {
      $("html,body").animate({scrollTop:0},500,"swing");
    },
    scEvent: function() {
      this.scY = window.scrollY;
    }
  }
})

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

body {
 height: 100vh;
}

.main, .main2, .main3, .main4 {
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0;
}
.main {left: 0;}
.main2 {left: 100px;}
.main3 {left: 200px;}
.main4 {left: 300px;}
/*==========================================================
レスポンシブ 3つの方法
===========================================================*/
//https://www.to-r.net/media/smooth_scrolling_2019/

//CSSでスムーズスクロール
/*
対応ブラウザが限られる
https://caniuse.com/#search=scroll-behavior
*/
html{
  //scroll-behavior: smooth;
}

/*==========================================================
ページトップへ
===========================================================*/
[v-cloak] {
  display: none;
}
#jsApp--pagetop-link {
  margin: 16px;
  background: linear-gradient(#7f88b1, #f35478);
}

#pagetop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  cursor: pointer;
  background: #000;
  box-shadow: 0 0 4px 0px #555;

  //出現動作に関係するのは此処より下
  transition: all 0.6s;
  &.v-enter,
  &.v-leave-to {
    opacity: 0;
    bottom: 10px;
  }
}


.pagetop-link {
  padding: 10px;
  position: fixed;
  left: 20px;
  bottom: 20px;
  line-height: 0;
  transition: all 0.3s;

  .pagetop-link-image {
   font-size: 12px;
   padding-bottom: 10px;
    img {
      width: 50px;
      height: 50px;
    }
  }
  .pagetop-link-text {
    font-size: 10px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
  }
}

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

vue-component-scroll
--------------------


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

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