vue的項目,其實jq裏有一個animate函數可以直接用,但是不想用jq,而且搜了一下animate,但是都是一個元素出入效果,不是我想要的那種從一個起點滑到另一個重點的那種。
1.綁定一個函數
裏面傳參點擊這個服務大廳要跳轉的滾動條的高度
<div @click="scrol(1500)">服務大廳</div>
2.主要函數
遞歸的思想,這個是我在搜的時候,網上資源亂七八糟一大堆,但是都不適用自己項目,忽然有一篇看着還可以其中的遞歸點亮了我的腦袋
methods:{
//點擊滾動
scrol(a){
var now = document.documentElement.scrollTop;//獲取當前滾動條的高度
var stance = now -a;//當前與要去的樓層的差距
var i = 0;//初始字段
if(now>a){ //向上滑動
setup();
}else{
setdown();
}
//向上
function setup(){
now = document.documentElement.scrollTop; //每次向上都要先獲取目前的高度
if(now>a && i<50){ //分爲50個小份向上滑動
document.documentElement.scrollTop = Number(now - stance/50);
i++;
setTimeout(setup,10); //每10ms滑動一次,然後遞歸直到最後50次後定位
}else{
document.documentElement.scrollTop = a;
}
}
//向下
function setdown(){
now = document.documentElement.scrollTop;
if(now<a && i<50){
document.documentElement.scrollTop = Number(now - stance/50);
i++;
setTimeout(setdown,10);
}else{
document.documentElement.scrollTop = a;
}
}
}
},