html5滚动到指定元素位置

迷南。 2022-12-20 01:51 368阅读 0赞

## 滚动到页面指定元素 ##

### **window.requestAnimationFrame** ###

// 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);
    }

### wx.pageScrollTo ###

//微信小程序
    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()
        })
    }

### **Element.scrollIntoView()** ###

**Element.scrollIntoView**方法让当前的元素滚动到浏览器窗口的可视区域内

const element = document.querySelector("#comment");
    element.scrollIntoView();