H5中div横向及竖向滚动指定区域至顶部

横向滚动

点击后自动滚动到页面左侧第一个

<div className="service-type-list" ref={el => this.tabsScroll(el)}>
     <div
             className={csfwId + "" === "" ? "row active" : "row"}
             onClick={() => {
             this.dispatch({type: "input", data: {csfwId: ""}});
             this.getDataList(1, "");
             }}
     >
                  全部
     </div>
     {this.renderTabsItem()}
</div>
              

tabsScroll(e) {
    $(e).animate({scrollLeft: $(e).find('.active').length && ($(e).scrollLeft() || 0) + $(e).find('.active').position().left}, 200);
}

竖向滚动

点击tab后下面页面滚动到指定标签

const views = $(view) as any;
views.animate({ scrollTop: views.scrollTop() + $(`#tab_${index}`).offset().top - 90 }, 100);

view是通过react中ref获取的可滚动页面元素

拓展学习

1、获取元素到页面顶部距离的语句为：

// 1、jquery写法：
$(“#divID”).offset().top  //推荐

$("#vertical").position().top

// 2、js写法：

document.getElementById("divID").offsetTop  //推荐

2、获取滚动条高度和位置

// 获取滚动条到顶部的垂直高度：
$(document).scrollTop()或$(window).scrollTop()
// 获取滚动条到左边的垂直宽度：
$(document).scrollLeft()或$(window).scrollLeft()

1、offset()方法获取匹配元素在当前窗口的相对偏移量。这里的窗口指的是当前页面的窗口，不包括浏览器的菜单栏等，当然我们也不太需要使用jquery来控制整个浏览器，我们所要控制的是页面窗口。 2、position()方法获取匹配元素相对父元素的偏移量。即获取的是该元素相对于最近的一个拥有绝对定位或者相对定位的父元素的偏移量。如果所有的父元素都是默认的static定位方式，则其处理方式和offset()一样，是当前窗口的偏移量。