滚动到页面指定元素

滚动到页面指定元素

// h5
function scrollToElement(elementId,speed){
	let destEle = document.getElementById(elementId);
    let scrolltopTemp = document.documentElement.scrollTop || document.body.scrollTop;
    let rect = destEle.getBoundingClientRect();
    // 获取元素相对窗口的top值，此处应加上页面本身的偏移
    let top = scrolltopTemp + rect.top;
    let currentTop = 0;
    let requestId;
    // 采用requestAnimationFrame，平滑动画
    function step () {
        currentTop += speed;
        if (currentTop <= top) {
            document.body.scrollTo(0, currentTop);
            requestId = window.requestAnimationFrame(step);
        } else {
            window.cancelAnimationFrame(requestId);
        }
    }
    window.requestAnimationFrame(step);
}

//微信小程序
function wxScrollToElement(elementId, duration){
    var scrollTop;
    const query= wx.createSelectorQuery();  //创建节点查询器
    query.select(elementId).boundingClientRect()  //选择toViewid获取位置信息
    query.selectViewport().scrollOffset()  //获取页面查询位置的
    query.exec(function(res) {
        scrollTop = res[0].top+(res[1].scrollTop||0)
        wx.createSelectorQuery().select('.page').boundingClientRect(function(rect) {
            wx.pageScrollTo({
                scrollTop: scrollTop,
                duration: duration
            })
        }).exec()
    })
}