Scroll to a position in React

React Scroll-To

A React component that makes scrolling easy.

React Scroll-To provides a Higher Order Component, and Render Props implementation.

Install

npm: npm install react-scroll-to --save

yarn: yarn add react-scroll-to

API

Render Props:

// Scroll to position (0, 500) in the browser window
import React, { Component } from "react";
import { ScrollTo } from "react-scroll-to";

export default class MyComponent extends Component {
    render() {
        return (
            <ScrollTo>
                {
                    (scroll) => (
                        <a onClick={() => scroll(0, 500)}>
                            Scroll to Bottom
                        </a>
                    )
                }
            </ScrollTo>
        );
    }
}

// Scroll to position (0, 500) within all provided <ScrollArea /> children
import React, { Component } from "react";
import { ScrollTo, ScrollArea } from "react-scroll-to";

export default class MyComponent extends Component {
    render() {
        return (
            <ScrollTo>
                {
                  (scroll) => (
                      <ScrollArea style={{ height: 1000 }}>
                        <button onClick={() => scroll(0, 500)}>
                          Scroll within this container
                        </button>
                      </ScrollArea>
                  )
                }
            </ScrollTo>
        );
    }
}

// Scroll to position (0, 500) within a specific <ScrollArea /> child
import React, { Component } from "react";
import { ScrollTo, ScrollArea } from "react-scroll-to";

export default class MyComponent extends Component {
    render() {
        return (
            <ScrollTo>
                {
                  (scroll, scrollById) => (
                      <div>
                          <ScrollArea id="foo" style={{ height: 1000 }}>
                              <button onClick={() => scrollById("foo", 0, 500)}>
                                  Scroll within this container
                              </button>
                          </ScrollArea>

                          <ScrollArea style={{ height: 1000 }}>
                              This container won't scroll
                          </ScrollArea>
                      </div>
                  )
                }
            </ScrollTo>
        );
    }
}

Higher Order Component:

// Scroll to position (0, 500) within the browser window
import React from "react";
import { ScrollToHOC } from "react-scroll-to";

export default ScrollToHOC(function(props) {
    return (
        <a onClick={() => props.scroll(0, 500)}>
            Scroll to Bottom
        </a>
    );
})

// Scroll to position (0, 500) within all provided <ScrollArea /> children
import React from "react";
import { ScrollToHOC, ScrollArea } from "react-scroll-to";

export default ScrollToHOC(function(props) {
    return (
        <ScrollArea style={{ height: 1000 }}>
            <a onClick={() => props.scroll(0, 500)}>
                Scroll to Bottom
            </a>
        </ScrollArea>
    );
})

// Scroll to position (0, 500) within a specific <ScrollArea /> child
import React from "react";
import { ScrollToHOC, ScrollArea } from "react-scroll-to";

export default ScrollToHOC(function(props) {
    return (
        <div>
            <ScrollArea id="foo" style={{ height: 1000 }}>
                <a onClick={() => props.scrollById("foo", 0, 500)}>
                    Scroll to Bottom
                </a>
            </ScrollArea>

            <ScrollArea style={{ height: 1000 }}>
              This container won't scroll
            </ScrollArea>
        </div>
    );
})

GitHub