vue-demo:页面锚点动画效果
2019-08-13 本文已影响0人
牛妈代代
主要知识点：
获取/设置页滚动条高度
document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;
获取元素offsetTop;
以下是代码，仅供参考，欢迎纠错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>页面锚点</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<div>
<ul class="right">
<li class="d_jump">
<h2>第一项</h2>
</li>
<li class="d_jump">
<h2>第二项</h2>
</li>
<li class="d_jump">
<h2>第三项</h2>
</li>
<li class="d_jump">
<h2>第四项</h2>
</li>
</ul>
<ul class="left">
<li v-for="(n,index) in 4" :key="index" @click="animate(index,8)">
{{n}}
</li>
</ul>
<div style="width:100%; height:1000px; background:#ddd; ">
</div>
</div>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
msg: "测试数据",
isActive: false,
}
},
methods: {
animate: function (index,speed) {
let el=document.querySelectorAll(".d_jump");
let total=el[index].offsetTop;
let documentTotal=document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;
//console.log(documentTotal);
//console.log(total);
let timer=null;
timer=setInterval(function(){
if(documentTotal<total){
documentTotal+=speed;
setScrollTop(documentTotal)
if(Math.abs(documentTotal-total)<speed){
clearInterval(timer);
}
}
if(documentTotal>total){
documentTotal-=speed;
setScrollTop(documentTotal)
if(Math.abs(documentTotal-total)<speed){
clearInterval(timer);
}
}
},30)
function setScrollTop(total){
document.body.scrollTop = total;
// Firefox
document.documentElement.scrollTop = total;
// Safari
window.pageYOffset = total;
}
},
}
})
</script>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 750px;
margin: 0 auto;
border: 1px solid red;
}
div {
position: relative;
}
ul {
list-style: none;
}
.right {
padding-left: 200px;
}
.right li {
height: 300px;
background: orange;
margin-bottom: 10px;
}
.left {
position: fixed;
left: 6%;
top: 35%;
padding-left: 40px;
z-index:9;
}
.left li {
width: 50px;
height: 50px;
border-radius: 50%;
background: orange;
color: #fff;
text-align: center;
line-height: 50px;
margin-bottom: 50px;
font-size: 30px;
}
</style>
</body>
</html>
