Url hash is changing, but viewport not scrolled

Hi. I have 15 React and 3 React Router. Do you supported it?

"react": "^15.4.2",
"react-router": "^3.0.2",

I have this markup:

<ul className="links">
          <li>
            <a href="#link1">
              Link 1
            </a>
          </li>
          <li>
            <a href="#link2">
              Link 2
            </a>
          </li>
          <li>
            <a href="#link3">
              Link 3
            </a>
          </li>
          <li>
            <a href="#link4">
              Link 4
            </a>
          </li>
          <li>
            <a href="#link5">
              Link 5
            </a>
          </li>
        </ul>

<ScrollableAnchor id={"link1"}>
          <div>
.......
          </div>
        </ScrollableAnchor>

So it’s not working. No errors in console. Url hash is changing, but viewport not scrolled

[JonatanSalas]

I have ended up with my own solution:

import React from 'react';
import { withRouter } from 'react-router-dom';

class ScrollToAnchors extends React.Component {
    componentDidUpdate(prevProps) {
        if (this.props.location !== prevProps.location) {
            const element = document.querySelector(this.props.location.hash);

            if (element) {
                element.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        }
    }

    render() {
        return this.props.children;
    }
}

export default withRouter(ScrollToAnchors);

Also, for supporting smooth-scroll in all browsers I have added a polyfill.

UPDATE:

You can also use Jump.js and refactor the previous component to this new one:

import React from 'react';
import jump from 'jump.js';
import { withRouter } from 'react-router-dom';

class ScrollToAnchors extends React.Component {
    componentDidUpdate(prevProps) {
        if (this.props.location !== prevProps.location) {
            const element = document.querySelector(this.props.location.hash);

            if (element) {
                jump(element, {
                    duration: this.props.duration || 500,
                    offset: this.props.offset || 0,
                    callback: this.props.callback || undefined,
                    a11y: this.props.a11y || false
                });
            }
        }
    }

    render() {
        return this.props.children;
    }
}

export default withRouter(ScrollToAnchors);

[sholzmayer]

I had the same problem. Do you have a fixed navigation and the content is overlapped, so it isn’t visible - but shown under the navbar?

This worked for me:

import { configureAnchors } from 'react-scrollable-anchor'; configureAnchors({ offset: -64 });