React如何实现锚点滚动

解决方案描述

实现锚点滚动, 不要用标签, 因为会触发路由跳转

可以使用H5提供的API scrollToAnchor

scrollToAnchor = (anchorName) => {
    if (anchorName) {
        let anchorElement = document.getElementById(anchorName);
        if(anchorElement) { anchorElement.scrollIntoView(); }
    }
  }

示例

不用scrollToAnchor的情况

          
be together. not the same.
          
welcome to android... be yourself. do your thing. see what's going on.
          

             create your android character
          

          // 红色按钮
          
            
              expand_more
            
          
        
        

          //需要跳转到的锚点
          
          跳到这里
          

          跳到这里
          

          跳到这里
          

          跳到这里
          

          跳到这里
          

          跳到这里
          

          跳到这里
          

        

如上所述, 这样遇到了标签href=“#xxx”的时候，会进行单页前端路由跳转的问题。

于是利用上述scrollToAnchorAPI进行修改

class HomeView extends Component {

  scrollToAnchor = (anchorName) => {
    if (anchorName) {
        let anchorElement = document.getElementById(anchorName);
        if(anchorElement) { anchorElement.scrollIntoView(); }
    }
  }

  render() {

    return (
      

        

          
be together. not the same.
          
welcome to android... be yourself. do your thing. see what's going on.
          

             create your android character
          

          this.scrollToAnchor('screens')}>
            
              expand_more
            
          
        
        

          
          跳到这里
          

          跳到这里
          

          跳到这里
          

          跳到这里
          

          跳到这里
          

          跳到这里
          

          跳到这里
          

        
      
    );
  }
}
export default HomeView;

我们进行了两个修改：

1. 将锚点用传统的name属性，改成id属性。这样我们就可以用document.getElementById方法方便的查询查询到锚点。
2. 将原来的红色按钮的href属性去掉，然后添加一个onClick方法。onClick方法传入一个锚点的id，然后用下面的函数来找到锚点并跳转到锚点。

scrollToAnchor = (anchorName) => {
    if (anchorName) {
        // 找到锚点
        let anchorElement = document.getElementById(anchorName);
        // 如果对应id的锚点存在，就跳转到锚点
        if(anchorElement) { anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'}); }
    }
  }

scrollIntoView的语法

用法如下:

element.scrollIntoView();
element.scrollIntoView(true);
element.scrollIntoView(alignToTop);
element.scrollIntoView(scrollIntoViewOptions);

alignToTop是一个布尔值，true 元素对齐到祖先元素的顶部，false 元素对齐到祖先元素的底部，默认是true

scrollIntoViewOptions是一个布尔值或以下选项的对象：

{
     behavior: 'auto' | 'instant' | 'smooth',
     block: 'start' | 'end'
}

smooth: 带滚动动画

原文参照: https://zhuanlan.zhihu.com/p/25294428?refer=c_78280513