<!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;
}