原生JS实现平滑到指定位置(仿锚点效果)

点击按钮,页面滑动到指定位置,仿a标签锚点效果

function goTarget(target) {
    var timer = null;
    var lastPos = 0;
    function goMove() {
        var currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
        currentPosition = parseInt(currentPosition)
        if(lastPos == currentPosition) { //页面高度不够长,未滑动到指定位置的时候,已经滑动到底部了
            window.scrollTo(0, target);
            clearInterval(timer);
            console.log('move to ' + target);
            return;
        }
        lastPos = currentPosition;
        console.log(target, currentPosition);
        if(Math.abs(currentPosition - target) < 20) {
            window.scrollTo(0, target);
            clearInterval(timer);
            console.log('move end');
            return;
        }
        if (currentPosition -target > 20) {
            currentPosition -= 20;
            window.scrollTo(0, currentPosition);
        } else {
            currentPosition += 20;
            window.scrollTo(0, currentPosition);
        }
    }
    timer = setInterval(goMove, 10);
}
$('#s-list1').on('click', function () {
    var targetPos = parseInt($('#s-manCpOne').offset().top);
    goTarget(targetPos);
})
转载
原文:https://blog.csdn.net/u012193330/article/details/82910811 



评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值