Question

我正在尝试滚动到页面上的锚标签，该标签使用axios通过API填充内容。我的问题是页面在重新加载/页面更改时没有滚动到正确的位置。我不确定我错过了什么/做错了。

在我的反应路由器上，我将窗口滚动到页面顶部，因为我希望用户从页面顶部开始：

    ReactDOM.render(
  <Router history={browserHistory}>
    <Route
      path="/"
      onChange={(prevState, nextState) => {
        if (nextState.location.action !== 'POP') {
          window.scrollTo(0, 0);
        }
      }}
      component={App}
      >
      <IndexRoute pageId={5} background="" component={Home}/>
      <Route path="/your-journey" pageId={7} component={YourJourney}/>
      <Route path="/designed-for-you" pageId={6} component={DesignedForYou}/>
      <Route path="/your-gateway" background="" pageId={1} component={YourGateway}/>
      <Route path="/get-in-touch" background="no-hero-image" pageId={4} component={GetInTouch}/>
      <Route path="/legal-and-compliance" background="no-hero-image" pageId={8} component={Legal}/>
      <Route path="/privacy" background="no-hero-image" pageId={9} component={Privacy}/>
    </Route>
  </Router>,
  document.getElementById('root')
);

我发现当我更改页面时，我将页面组件的render函数放在元素函数中，但重新加载它时不起作用。

这是我的渲染函数中的代码：

if (window.location.hash && this.state.dataLoaded) {
  console.log(this.state.dataLoaded);
  let offset = 0;
  if (window.innerWidth > 768) {
    offset = 174;
  } else {
    offset = 150;
  }

  setTimeout(() => {
    scrollToElement(window.location.hash, {
      offset: -offset,
      ease: 'outSine',
      duration: 1500
    });
  }, 0);
}

具有dataLoaded的状态设置如下：

constructor(props) {
super(props);
this.state = {
  pageId: '',
  dataLoaded: false,
  data: {
    title: '',
    body: '',
    image: '',
    imageRows: [],
    footer: []
  }
};

 }

然后在componentDidMount函数中设置它：

 componentDidMount() {
    this.serverRequest = axios.get(config.API_BASE + config.GALLERY_API + '/' + this.state.pageId).then(response => {
      if (this.unmounted) {
        return;
      }
      const res = response.data;

      if (response.status === 200) {
        this.setState({
          data: res,
          dataLoaded: true
        });
      }
    });
  }

有人遇到过这样做的好方法吗？我无法使用scrollintoview函数，因为没有缓动。

更多信息是我使用标签来更改页面。

由于

修改：我已将scroll函数移动到promise / 200响应中的componentDidMount函数中。我也将设置超时更改为250毫秒，这解决了我的重新加载问题并转到了正确的位置。我想/知道这是一个黑客，所以请告诉我如何以更好的方式解决这个问题。

更改页面或重新加载页面滚动到锚标签反应

0 个答案: