added experimental scroll helper

src/components/common/ScrollHelperBottom/index.tsx

@@ -0,0 +1,27 @@
+import React, { VFC } from 'react';
+import styles from './styles.module.scss';
+import { useScrollTop } from '~/hooks/dom/useScrollTop';
+import { useScrollHeight } from '~/hooks/dom/useScrollHeight';
+import classNames from 'classnames';
+import { useScrollToBottom } from '~/hooks/dom/useScrollToBottom';
+
+interface ScrollHelperBottomProps {}
+
+const ScrollHelperBottom: VFC<ScrollHelperBottomProps> = () => {
+  const top = useScrollTop();
+  const scrollHeight = useScrollHeight();
+  const scrollToBottom = useScrollToBottom();
+
+  const isVisible = scrollHeight > 2000 && top < scrollHeight * 0.25;
+
+  return (
+    <div
+      className={classNames(styles.helper, { [styles.visible]: isVisible })}
+      onClick={scrollToBottom}
+    >
+      Вниз
+    </div>
+  );
+};
+
+export { ScrollHelperBottom };

src/components/common/ScrollHelperBottom/styles.module.scss

@@ -0,0 +1,26 @@
+@import "src/styles/variables";
+
+.helper {
+  position: fixed;
+  bottom: 0;
+  background: radial-gradient($red, transparent) 50% 24px no-repeat;
+  background-size: 100% 48px;
+  display: none;
+  width: calc(100% - 20px);
+  z-index: 4;
+  text-align: center;
+  max-width: 500px;
+  height: 64px;
+  align-items: flex-end;
+  justify-content: center;
+  padding: $gap;
+  text-transform: uppercase;
+  font: $font_16_medium;
+  border-radius: $radius $radius 0 0;
+  user-select: none;
+  cursor: pointer;
+
+  &.visible {
+    display: flex;
+  }
+}

src/components/profile/ProfileAvatar/styles.module.scss

@@ -19,7 +19,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    opacity: 0;
+    opacity: 1;
   }
 
   &:hover {

src/hooks/dom/useScrollHeight.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+const getHeight = () => {
+  if (typeof document === 'undefined') {
+    return 0;
+  }
+
+  const body = document.body;
+  const html = document.documentElement;
+
+  return Math.max(
+    body.scrollHeight,
+    body.offsetHeight,
+    html.clientHeight,
+    html.scrollHeight,
+    html.offsetHeight
+  );
+};
+export const useScrollHeight = () => {
+  const [scrollHeight, setScrollHeight] = useState(getHeight());
+
+  useEffect(() => {
+    const measure = () => setScrollHeight(getHeight());
+
+    window.addEventListener('scroll', measure);
+    window.addEventListener('resize', measure);
+
+    return () => {
+      window.removeEventListener('scroll', measure);
+      window.removeEventListener('resize', measure);
+    };
+  }, []);
+
+  return scrollHeight;
+};

src/hooks/dom/useScrollToBottom.ts

@@ -0,0 +1,10 @@
+import { useCallback } from 'react';
+import { useScrollHeight } from '~/hooks/dom/useScrollHeight';
+
+export const useScrollToBottom = () => {
+  const top = useScrollHeight();
+
+  return useCallback(() => {
+    window.scrollTo({ top });
+  }, [top]);
+};

src/hooks/dom/useScrollToTop.ts

@@ -14,7 +14,6 @@ export const useScrollToTop = (deps?: any[]) => {
       const bounds = targetElement.getBoundingClientRect();
       window.scrollTo({
         top: bounds.top - 100,
-        behavior: 'smooth',
       });
     },
     deps && Array.isArray(deps) ? deps : []

src/hooks/dom/useScrollTop.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 export const useScrollTop = () => {
-  const [top, setTop] = useState(0);
+  const [top, setTop] = useState(typeof window !== 'undefined' ? window.scrollY : 0);
 
   useEffect(() => {
     const onScroll = () => {

src/layouts/NodeLayout/index.tsx

@@ -17,6 +17,8 @@ import { useNodeContext } from '~/utils/context/NodeContextProvider';
 import { useNodePermissions } from '~/hooks/node/useNodePermissions';
 import { useNodeActions } from '~/hooks/node/useNodeActions';
 import { NodeTitle } from '~/components/node/NodeTitle';
+import { ScrollHelperBottom } from '~/components/common/ScrollHelperBottom';
+import { Superpower } from '~/components/boris/Superpower';
 
 type IProps = {};
 
@@ -65,7 +67,9 @@ const NodeLayout: FC<IProps> = () => {
 
       <SidebarRouter prefix="/post:id" />
 
-      <Route path={URLS.NODE_EDIT_URL(':id')} component={EditorEditDialog} />
+      <Superpower>
+        <ScrollHelperBottom />
+      </Superpower>
     </div>
   );
 };