scrolling to an element by id not working

Question

I am using React and trying to scroll a little past where an anchor link is supposed to link to after a hash change.

The answer provided here should work but for some reason it isn't. Can anyone see where I may be going wrong? The scrollToId function does get called, but for some reason doesn't scroll to my desired location.

const Page = () => {

    let scrollToId = () => {

        if(location.hash.length !== 0) {

            window.scrollTo(window.scrollX, window.scrollY + 200);

        }

    }

    window.addEventListener("hashchange", scrollToId);

   return (
      <div>
          <a href="#one">Link</a>
          <p id="one">One</p>
      </div>
      );

}

I've tried your code in jsfidde, it's working. https://jsfiddle.net/69z2wepo/85307/ — Andrii Starusiev, Sep 04 '17 at 09:55
@Andrew it scrolls alright, but it doesn't scroll the extra 200px — , Sep 04 '17 at 09:58
This "extra" 200px is all scroll height. You take your current scroll and plus 200px to this value. It's not an anchor. — Andrii Starusiev, Sep 04 '17 at 10:02
@Andrew but my point is that it doesn't add this extra 200px — , Sep 04 '17 at 10:08
@andrew to the anchor that it gets scrolled to - see here https://codesandbox.io/s/k853zrqkv — , Sep 04 '17 at 10:21
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/153603/discussion-between-raul-rodriguez-and-andrew). — , Sep 04 '17 at 10:22
@Andrew yeah, thanks, that didn't work either for some reason. In the end I solved this using pure css — , Sep 04 '17 at 15:21

Hemerson Carlin · Answer 1 · 2017-09-04T10:51:46.103

This is not the correct place to handle that. You need an event handler on your component in order to make it work. Otherwise you initialize the same addEventListener event multiple times on every render method.

import React, { Component } from 'react'

export default class YourComponent extends Component {
  constructor(props) {
    super(props)

    this.handleScroll = this.handleScroll.bind(this)
  }

  componentDidMount() {
    window.addEventListener('hashchange', this.handleScroll) // Initialize your listener
  }

  componentWillUnmount() {
    window.removeEventListener('hashchange', this.handleScroll) // Remove your listener
  }

  handleScroll() {
    if (window.location.hash.length !== 0) {
      window.scrollTo(window.scrollX, window.scrollY + 200)
    }
  }

  render() {
    return (
      <div>
        <a href="#one">Link</a>
        <p id="one">One</p>

        <div style={{ height: 900 }} />

        <div style={{ backgroundColor: 'red', width: 600, height: 100 }}>
          Content
        </div>
      </div>
    )
  }
}

I've just updated the code sample. Please try again :) – Hemerson Carlin Sep 04 '17 at 10:51 — Hemerson Carlin, Sep 04 '17 at 10:51

scrolling to an element by id not working

1 Answers1