Answers for "react functional component scroll to top"

2

react native scroll to top function componet

export const Parent : FC<ParentProps> = props => {
    const scrollRef = useRef<ScrollView>();

    const onFabPress = () => {
        scrollRef.current?.scrollTo({
            y : 0,
            animated : true
        });
    }

    return (
        <View>
            <ScrollView ref={scrollRef}>
                {/* Your content here */}
            </ScrollView>
            <FloatingButton onPress={onFabPress} />
        </View>  
    );
}

export const FloatingButton : FC<FloatingButtonProps> = props => {
    const { onPress } = props;

    const onFabPress = () => {
        // Do whatever logic you need to
        // ...

        onPress();
    }

    return (
        <Fab position="bottomRight" onPress={onFabPress}>
            <Icon name="arrow-round-up" />
        </Fab>
    );
}



if you are using flatlist 


    const scrollRef = useRef<Flatlist>();


    const onFabPress = () => {
        scrollRef.current?.scrollToOffset({
            y : 0,
            animated : true
        });
    }

    
    
scrollToOffset is flatlist fucntion
Posted by: Guest on May-21-2021
6

scroll to top in react

componentDidMount() {
  window.scrollTo(0, 0)
}
Posted by: Guest on August-28-2020
2

scroll to top in react

useEffect(() => {
  window.scrollTo(0, 0)
}, [])
Posted by: Guest on August-28-2020

Code answers related to "react functional component scroll to top"

Code answers related to "Javascript"

Browse Popular Code Answers by Language