html怎么实现页面平滑移动,原生Javascript实现页面平滑滚动跳转

function scrollPosition(_obj) {//参数_obj可以是任何页面上存在的元素的id，或者是指定元素本身

var targetX, targetY;

if (!_obj) { //如果不指定锚点元素，就跳到页面顶端0，0位置

targetX = 0;

targetY = 0;

} else {

if (typeof (_obj) == "string") {

_obj = document.getElementById(_obj);

} else {

_obj = _obj

}

targetX = _obj.getBoundingClientRect().left + getScrollOffsets().x;

targetY = _obj.getBoundingClientRect().top + getScrollOffsets().y;

}

//如果目标元素的位置在最后一屏，那就指定目标位置为页面底部

//如果目标元素的位置为负数，就指定目标位置为页面顶部

var maxTargetX=document.body.scrollWidth-getViewPortSize().x;

if(targetX>=maxTargetX) targetX=maxTargetX;

if(targetX<0) targetX=0;

var maxTargetY=document.body.scrollHeight-getViewPortSize().y;

if(targetY>=maxTargetY) targetY=maxTargetY;

if(targetY<0) targetY=0;

var tempTimer = setInterval(function () {

var currentY = getScrollOffsets().y;

var currentX = getScrollOffsets().x;

//跳转位置的缓冲公式

var tempTargetY = currentY - (currentY - targetY) / 10;

var tempTargetX = currentX - (currentX - targetX) / 10;

//由于缓冲公式会生成小数，而scrollTo函数会省略小数点后面的数字，所以要对跳转的坐标做一些微调

if (Math.abs(tempTargetY - currentY) < 1) {

tempTargetY - currentY > 0 ? tempTargetY++ : tempTargetY--;

}

if (Math.abs(tempTargetX - currentX) < 1) {

tempTargetX - currentX > 0 ? tempTargetX++ : tempTargetX--;

}

//页面跳转

window.scrollTo(tempTargetX, tempTargetY);

//到达指定位置后清除一下Interval

if ( Math.abs(getScrollOffsets().y - targetY) <= 2 && Math.abs(getScrollOffsets().x - targetX) <= 2 ) {

clearInterval(tempTimer);

window.scrollTo(targetX, targetY);

//console.log("done");

}

}, 10);

}

function scrollPosition(_obj) {//参数_obj可以是任何页面上存在的元素的id，或者是指定元素本身

var targetX, targetY;

if (!_obj) { //如果不指定锚点元素，就跳到页面顶端0，0位置

targetX = 0;

targetY = 0;

} else {

if (typeof (_obj) == "string") {

_obj = document.getElementById(_obj);

} else {

_obj = _obj

}

targetX = _obj.getBoundingClientRect().left + getScrollOffsets().x;

targetY = _obj.getBoundingClientRect().top + getScrollOffsets().y;

}

//如果目标元素的位置在最后一屏，那就指定目标位置为页面底部

//如果目标元素的位置为负数，就指定目标位置为页面顶部

var maxTargetX=document.body.scrollWidth-getViewPortSize().x;

if(targetX>=maxTargetX) targetX=maxTargetX;

if(targetX<0) targetX=0;

var maxTargetY=document.body.scrollHeight-getViewPortSize().y;

if(targetY>=maxTargetY) targetY=maxTargetY;

if(targetY<0) targetY=0;

var tempTimer = setInterval(function () {

var currentY = getScrollOffsets().y;

var currentX = getScrollOffsets().x;

//跳转位置的缓冲公式

var tempTargetY = currentY - (currentY - targetY) / 10;

var tempTargetX = currentX - (currentX - targetX) / 10;

//由于缓冲公式会生成小数，而scrollTo函数会省略小数点后面的数字，所以要对跳转的坐标做一些微调

if (Math.abs(tempTargetY - currentY) < 1) {

tempTargetY - currentY > 0 ? tempTargetY++ : tempTargetY--;

}

if (Math.abs(tempTargetX - currentX) < 1) {

tempTargetX - currentX > 0 ? tempTargetX++ : tempTargetX--;

}

//页面跳转

window.scrollTo(tempTargetX, tempTargetY);

//到达指定位置后清除一下Interval

if ( Math.abs(getScrollOffsets().y - targetY) <= 2 && Math.abs(getScrollOffsets().x - targetX) <= 2 ) {

clearInterval(tempTimer);

window.scrollTo(targetX, targetY);

//console.log("done");

}

}, 10);

}