React如何实现锚点滚动

解决方案描述

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

可以使用H5提供的API scrollToAnchor

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

示例

不用scrollToAnchor的情况

<div className="android-be-together-section mdl-typography--text-center">
          <div className="logo-font android-slogan">be together. not the same.</div>
          <div className="logo-font android-sub-slogan">welcome to android... be yourself. do your thing. see what's going on.</div>
          <div className="logo-font android-create-character">
            <a href=""><img src="images/andy.png" /> create your android character</a>
          </div>

          // 红色按钮
          <a href="#screens">
            <button className="android-fab mdl-button mdl-button--colored mdl-js-button mdl-button--fab mdl-js-ripple-effect">
              <i className="material-icons">expand_more</i>
            </button>
          </a>
        </div>
        <div className="mdl-grid" style={{height: 800}}>
          //需要跳转到的锚点
          <a name="screens"></a>
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
        </div>

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

于是利用上述scrollToAnchorAPI进行修改

class HomeView extends Component {

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

  render() {

    return (
      <div>
        <div className="android-be-together-section mdl-typography--text-center">
          <div className="logo-font android-slogan">be together. not the same.</div>
          <div className="logo-font android-sub-slogan">welcome to android... be yourself. do your thing. see what's going on.</div>
          <div className="logo-font android-create-character">
            <a href=""><img src="images/andy.png" /> create your android character</a>
          </div>

          <a onClick={()=>this.scrollToAnchor('screens')}>
            <button className="android-fab mdl-button mdl-button--colored mdl-js-button mdl-button--fab mdl-js-ripple-effect">
              <i className="material-icons">expand_more</i>
            </button>
          </a>
        </div>
        <div className="mdl-grid" style={{height: 800}}>
          <a id="screens"></a>
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
          跳到这里
          <br />
        </div>
      </div>
    );
  }
}
export default HomeView;

我们进行了两个修改：

将锚点用传统的name属性，改成id属性。这样我们就可以用document.getElementById方法方便的查询查询到锚点。

将原来的红色按钮的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

最后编辑于：2018.03.01 11:10:02