React如何实现锚点滚动

标签: react react锚点
33人阅读 评论(0) 收藏 举报
分类:

解决方案描述
实现锚点滚动, 不要用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

查看评论

React中解决锚点跳转问题

在React项目中,需要做锚点跳转 只需要添加一个 因为React中不能直接加ID,只能加上a标签 亲测可用,可以放心使用~~~...
  • weixin_36659134
  • weixin_36659134
  • 2017-12-20 16:28:45
  • 241

react引用antd-form组件

const AddMaintainPerson = Form.create()(React.createClass({ getInitialState() { return {...
  • qq_31307253
  • qq_31307253
  • 2017-02-22 10:10:44
  • 7777

react+ant design实现Table的增、删、改

业余web前端技术、热门前端代码分享、心得交流、随手笔记、梦想成为一个有情怀的程序员。...
  • JavaReact
  • JavaReact
  • 2017-02-28 17:01:23
  • 11756

React Native动画的锚点anchorPoint

在RN动画开发的过程中,有需求让图片绕中心点以外的其它点旋转,本以为是一个简单的问题,猜想Facebook应该有提供类似的API. 然而在官网找了一圈没有anchorPoint这个API,后来想了想,...
  • et295394330
  • et295394330
  • 2016-09-27 11:01:30
  • 1115

Element.scrollIntoView()

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。语法element.scrollIntoView(); // 等同于element.scrollInto...
  • yyy_hy
  • yyy_hy
  • 2018-02-28 10:55:05
  • 16

Webpack + react-router 按需加载

webpack + react-router 按需加载关键函数require.ensure(dependencies, callback, chunkName) 详情请见官方文档webpack 配置...
  • qq_24581629
  • qq_24581629
  • 2017-07-13 11:42:22
  • 996

react 学习持续更新

首先react语法是基于jsfiddle  开始 Hack React 的最简单的方法是用下面 JSFiddle 的 Hello Worlds:&amp;lt;!DOCTYPE html&amp;gt...
  • qq_21423689
  • qq_21423689
  • 2018-04-08 11:37:35
  • 18

js配合锚点实现动画滚动与监听

这个技能感觉不错,配合bootstrap写出的。下面是干货: ul 的每个li的每个a中的href指向锚点目标,比如说Home。 下面给出我发现好的源代码:$('#navbar-menu ul li...
  • changreal
  • changreal
  • 2016-04-04 22:56:00
  • 5240

JQuery 实现锚点链接之间的平滑滚动

web开发前端一直用JQuery ,真正接触了才体会到,JQuery 原来比我想象的要强大的多,也可能比我体会到的还要强大的多,特别是兼容性那个好,于是把一些好玩的,酷炫的,可以代替 JS 的,统统给...
  • fuyifang
  • fuyifang
  • 2014-10-27 09:26:56
  • 3620

react+redux框架配置从无到有直到正常运行全流程(下)

写于:2017-17-1-18上半段:react+redux框架配置从无到有直到正常运行全流程(上)开始在项目中使用react和redux项目的基本目录结构:因为把项目上传到git了,所以出现了一些额...
  • lx376693576
  • lx376693576
  • 2017-01-18 18:30:12
  • 2334
    个人资料
    持之以恒
    等级:
    访问量: 7万+
    积分: 1623
    排名: 3万+
    最新评论