diff --git a/types/react-scroll-to-bottom/index.d.ts b/types/react-scroll-to-bottom/index.d.ts
index db3126ba55..82657afcfc 100644
--- a/types/react-scroll-to-bottom/index.d.ts
+++ b/types/react-scroll-to-bottom/index.d.ts
@@ -80,22 +80,22 @@ export function useScrollTo(): (scrollTop: number | '100%') => void;
 /**
  * Scroll panel to bottom
  */
-export function useScrollToBottom(): () => void;
+export function useScrollToBottom(): (option?: ScrollOption) => void;
 
 /**
  * Scroll panel to end (depends on `mode`)
  */
-export function useScrollToEnd(): () => void;
+export function useScrollToEnd(): (option?: ScrollOption) => void;
 
 /**
  * Scroll panel to start (depends on `mode`)
  */
-export function useScrollToStart(): () => void;
+export function useScrollToStart(): (option?: ScrollOption) => void;
 
 /**
  * Scroll panel to top
  */
-export function useScrollToTop(): () => void;
+export function useScrollToTop(): (option?: ScrollOption) => void;
 
 /**
  * Observe scroll position change by passing a callback function
@@ -154,19 +154,19 @@ export const FunctionContext: Context<{
     /**
      * Scroll panel to bottom
      */
-    scrollToBottom: () => void;
+    scrollToBottom: (option?: ScrollOption) => void;
     /**
      * Scroll panel to end (depends on mode)
      */
-    scrollToEnd: () => void;
+    scrollToEnd: (option?: ScrollOption) => void;
     /**
      * Scroll panel to start (depends on mode)
      */
-    scrollToStart: () => void;
+    scrollToStart: (option?: ScrollOption) => void;
     /**
      * Scroll panel to top
      */
-    scrollToTop: () => void;
+    scrollToTop: (option?: ScrollOption) => void;
 }>;
 
 /**
@@ -206,3 +206,16 @@ export const StateContext: Context<{
      */
     sticky: boolean;
 }>;
+
+/**
+ * scrollToBottom/scrollToEnd/scrollToStart/scrollToTop accept an option in v3.0.0
+ * reference: https://github.com/compulim/react-scroll-to-bottom#300---2020-06-21
+ */
+export interface ScrollOption {
+    /**
+     * In future versions, the default behavior will be changed from smooth scrolling to discrete scrolling to align with HTML Standard
+     * Note: if not set behavior to smooth, `react-scroll-to-bottom` will warn
+     * reference: https://github.com/compulim/react-scroll-to-bottom/blob/main/packages/component/src/ScrollToBottom/Composer.js#L188
+     */
+    behavior?: 'smooth' | 'auto';
+}
diff --git a/types/react-scroll-to-bottom/react-scroll-to-bottom-tests.tsx b/types/react-scroll-to-bottom/react-scroll-to-bottom-tests.tsx
index 9a7b331440..20c62f1be8 100644
--- a/types/react-scroll-to-bottom/react-scroll-to-bottom-tests.tsx
+++ b/types/react-scroll-to-bottom/react-scroll-to-bottom-tests.tsx
@@ -1,16 +1,16 @@
 import * as React from "react";
 import ScrollToBottom, {
-    FunctionContext, StateContext, useAnimating, useAnimatingToEnd, useAtBottom, useAtEnd,
+    FunctionContext, ScrollOption, StateContext, useAnimating, useAnimatingToEnd, useAtBottom, useAtEnd,
     useAtStart, useAtTop, useMode, useObserveScrollPosition, useScrollTo, useScrollToBottom,
     useScrollToEnd, useScrollToStart, useScrollToTop, useSticky
 } from "react-scroll-to-bottom";
 
 const testing = () => {
     const scrollTo: (scrollTop: number | '100%') => void = useScrollTo();
-    const scrollToBottom: () => void = useScrollToBottom();
-    const scrollToEnd: () => void = useScrollToEnd();
-    const scrollToStart: () => void = useScrollToStart();
-    const scrollToTop: () => void = useScrollToTop();
+    const scrollToBottom: (option?: ScrollOption) => void = useScrollToBottom();
+    const scrollToEnd: (option?: ScrollOption) => void = useScrollToEnd();
+    const scrollToStart: (option?: ScrollOption) => void = useScrollToStart();
+    const scrollToTop: (option?: ScrollOption) => void = useScrollToTop();
     const callback: ({}: { scrollTop: number }) => void = () => {};
     useObserveScrollPosition(callback);
     useObserveScrollPosition(false);
@@ -92,7 +92,7 @@ const sampleCode2 = () => {
                     ut reprehenderit sit adipisicing proident culpa veniam sint veniam consectetur fugiat Lorem. Sint
                     dolor proident commodo proident non cupidatat labore.
                 </p>
-                {!sticky && <button onClick={scrollToBottom}>Click me to scroll to bottom</button>}
+                {!sticky && <button onClick={() => { scrollToBottom(); }}>Click me to scroll to bottom</button>}
             </React.Fragment>
         );
     };
@@ -105,7 +105,7 @@ const sampleCode2 = () => {
 };
 
 const sampleCode3 = () => {
-    const Content = ({ scrollToBottom, sticky }: { scrollToBottom: () => void; sticky: boolean }) => {
+    const Content = ({ scrollToBottom, sticky }: { scrollToBottom: (option?: ScrollOption) => void; sticky: boolean }) => {
         return (
             <React.Fragment>
                 <p>
@@ -126,7 +126,7 @@ const sampleCode3 = () => {
                     ut reprehenderit sit adipisicing proident culpa veniam sint veniam consectetur fugiat Lorem. Sint
                     dolor proident commodo proident non cupidatat labore.
                 </p>
-                {!sticky && <button onClick={scrollToBottom}>Click me to scroll to bottom</button>}
+                {!sticky && <button onClick={() => { scrollToBottom(); }}>Click me to scroll to bottom</button>}
             </React.Fragment>
         );
     };