我有个问题,我不知道怎么解决。 在我的react组件中,我在底部显示了一个很长的数据列表和一些链接。 点击任何链接后,我在列表中填充了新的链接集合,需要滚动到顶部。

问题是-如何滚动到顶部后,新的集合呈现?

'use strict';

// url of this component is #/:checklistId/:sectionId

var React = require('react'),
  Router = require('react-router'),
  sectionStore = require('./../stores/checklist-section-store');


function updateStateFromProps() {
  var self = this;
  sectionStore.getChecklistSectionContent({
    checklistId: this.getParams().checklistId,
    sectionId: this.getParams().sectionId
  }).then(function (section) {
    self.setState({
      section,
      componentReady: true
    });
  });

    this.setState({componentReady: false});
 }

var Checklist = React.createClass({
  mixins: [Router.State],

  componentWillMount: function () {
    updateStateFromProps.call(this);
  },

  componentWillReceiveProps(){
    updateStateFromProps.call(this);
   },

render: function () {
  if (this.state.componentReady) {
    return(
      <section className='checklist-section'>
        <header className='section-header'>{ this.state.section.name }   </header>
        <Steps steps={ this.state.section.steps }/>
        <a href=`#/${this.getParams().checklistId}/${this.state.section.nextSection.Id}`>
          Next Section
        </a>
      </section>
    );
    } else {...}
  }
});

module.exports = Checklist;

当前回答

如果所有人都想做一些简单的事情,这里有一个解决方案,对每个人都适用

添加这个迷你函数

scrollTop()
{
    window.scrollTo({
        top: 0,
        behavior: "smooth"
    });
}

从页脚调用函数,如下所示

<a className="scroll-to-top rounded" style={{display: "inline"}} onClick={this.scrollTop}>TOP</a>

如果你想添加漂亮的样式,这里是CSS

.scroll-to-top { 位置:固定; 右:1快速眼动; 底部:1快速眼动; 显示:没有; 宽度:2.75快速眼动; 高度:2.75快速眼动; text-align:中心; 颜色:# fff; 背景:rgba(90,92,105,0.5); 行高:46 px; }

其他回答

我在React 17.0中使用功能组件和窗口做SPA。滚动窗口。scrollTo和所有这些变体都不适合我。所以我用useRef钩子做了一个解决方案。我用Ref在组件的顶部创建了一个span标签然后使用Ref。current。scrollintoview ()

这里有一个简短的例子:

import React, { useEffect,useRef} from 'react';

export const ExampleComponent = () => {

  const ref = useRef();

  useEffect(() => {
      ref.current.scrollIntoView()
  }, []);

return(

 <>
   <span ref={ref}></span>
   <YourCodeHere />
   <MoreCode />
</>

) }

这可以,也可能应该使用refs来处理:

“…你可以使用ReactDOM。findDOMNode作为一个“逃生舱口”,但我们不推荐它,因为它破坏了封装,在几乎所有情况下,在React模型中都有更清晰的方式来构建代码。”

示例代码:

class MyComponent extends React.Component {
    componentDidMount() {
        this._div.scrollTop = 0
    }

    render() {
        return <div ref={(ref) => this._div = ref} />
    }
}

以上所有的方法对我都不起作用——不知道为什么,但是:

componentDidMount(){
    document.getElementById('HEADER').scrollIntoView();
}

working,其中HEADER是HEADER元素的id

这段代码将导致滚动的平滑行为:

<div onClick={() => {
   ReactDOM.findDOMNode(this.headerRef)
      .scrollIntoView({behavior: "smooth"});
                }} 
  className='go-up-button' >
</div>

你可以在scrollIntoView()中传递其他参数 可以使用以下语法:

element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter

alignToTop可选 为布尔值:

If true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value.
If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "end", inline: "nearest"}.

scrollIntoViewOptions可选 是具有以下属性的对象:

*behavior* Optional
    Defines the transition animation.
    One of "auto", "instant", or "smooth". Defaults to "auto".
*block* Optional
    One of "start", "center", "end", or "nearest". Defaults to "center".
*inline* Optional
    One of "start", "center", "end", or "nearest". Defaults to "nearest".

更多细节可以在这里找到:MDN文档

这个解决方案既适用于功能组件,也适用于类基。

首先,我不喜欢每次重新渲染时滚动到顶部的想法,相反,我喜欢附加函数到特定的事件。

步骤#1:创建一个ScrollToTop函数

const scrollToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: "smooth",
    });
};

步骤2:在事件(如onClick)上调用此函数

onRowClick={scrollToTop()}
// onClick={scrollToTop()}
// etc...