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;
+  }
+}