Go to Top button outside scrollableDiv

[richardpramono]

How to implement "Go to Top" button with this component when this component located inside a scrollableDiv and the "Go to Top" button is outside the scrollableDiv?

[ankeetmaini]

I don't think it matters where your button is located. On click of button just get hold of scrollableDiv.

onClickOfBackToTop = () => {
 const div = document.getElementById('scrollableDiv');
 div.scrollTo(0, 0)
}

[sergey-g-s]

I don't think it matters where your button is located. On click of button just get hold of scrollableDiv.

onClickOfBackToTop = () => {
 const div = document.getElementById('scrollableDiv');
 div.scrollTo(0, 0)
}

In my case it did not work

[cullanshewfelt]

I needed to do the same thing, for some reason @ankeetmaini code wasn't working for me so I did this:

scrollToTop = () => {
    const div = document.getElementsByClassName('scrollableDiv')[0];
    div.scrollTop = 0;
}

[guillempuche]

SOLVED

[PROBLEM] I didn't know if use document.getElementById('...'); or this.chatRef or whatever reference. And I didn't know which reference and how put on the getScrollParent.

[SOLUTION]

STEP 1: CSS of the parent container (chatContent) with: overflow and height.

*There'are styles for its children components.

const styles = theme => ({
    chatContent: {
        overflowX: 'hidden',
        overflowY: 'auto',
        // Height is necessary to return the value (via container reference) to the Infinite Scroll component.
        height: '100%'
    },
    historyTop: {
        marginTop: '10px'
    },
    historyBottom: {
        marginTop: '70px'
    },
    history: {
        display: 'flex',
        flexDirection: 'column'
    },
    scrollLoader: {
        marginTop: '10px',
        maringBottom: '10px',
        textAlign: 'center'
    }
});

STEP 2: I use this.chatContentRef = React.createRef(); (see on React docs).

constructor(props) {
        super(props);
        this.state = { history: [] };

        this.chatContentRef = React.createRef();

        this.fetchMoreMessages = this.fetchMoreMessages.bind(this);
        this.scrollToBottom = this.scrollToBottom.bind(this);
}

STEP 3: Write the scrollToBottom function. You can use it on componentDidMount or wherever you want.

scrollToBottom() {
        this.chatContentRef.current.scrollTop = this.chatContentRef.current.scrollHeight;
}

STEP 4: Fill the render() method.

TIPs:

• Reference the parent container. You don't need to use: ref={ref => this.reference = ref}, React attachs the reference for you (see the step 2).
• I use current ot pass to Infinite Scroller: getScrollParent={() => this.chatContentRef.current}.
• I use useWindow={false}

render() {
        const { hasMoreMessages, classes, t } = this.props;

        return (
            <div
                className={classNames(classes.chatContent)}
                ref={this.chatContentRef}
            >
                <InfiniteScroll
                    isReverse={true}
                    pageStart={0}
                    loadMore={this.fetchMoreMessages}
                    hasMore={hasMoreMessages}
                    initialLoad={false}
                    threshold={300}
                    useWindow={false}
                    getScrollParent={() => this.chatContentRef.current}
                    loader={
                        <Typography
                            key="chatContentLoader"
                            variant="caption"
                            className={classes.scrollLoader}
                        >
                            {t('general.loading')}
                        </Typography>
                    }
                    className={classNames(classes.infiniteScroll)}
                >
                    <div className={classes.historyTop} />
                    <div className={classes.history}>{this.state.history}</div>
                    <div className={classes.historyBottom} />
                </InfiniteScroll>
            </div>
        );
}

---

FOR THE AUTHORS

You have to write more samples on the docs, it's very limited right know.

[ianizaguirre]

When I inspected the component I saw that it had a classname "infinite-scroll-component". So I did not need to add a class or id anywhere, I just used the class it had been built with.

This Works for me:

  function scrollToTop() {
    const div = document.getElementsByClassName('infinite-scroll-component')[0];
    div.scrollTop = 0;
  }

 <button onClick={() => this.scrollToTop()}>SCROLL TO TOP</button>

[MAbdullahMalik]

@ianizaguirre thank you so much. .. works perfectly