Added scroll up button in the editor

public/icons/up-button.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="26" height="26" stroke="currentColor" stroke-width="2"/>
+<path d="M10 11H13V20H15V11H18L14 7L10 11Z" fill="currentColor"/>
+</svg>

public/locales/en/translation.json

@@ -166,6 +166,7 @@
   "Restore password": "Restore password",
   "Save draft": "Save draft",
   "Save settings": "Save settings",
+  "Scroll up": "Scroll up",
   "Search": "Search",
   "Search author": "Search author",
   "Search topic": "Search topic",

public/locales/ru/translation.json

@@ -187,6 +187,7 @@
   "Send": "Отправить",
   "Send link again": "Прислать ссылку ещё раз",
   "Settings": "Настройки",
+  "Scroll up": "Наверх",
   "Share": "Поделиться",
   "Short opening": "Небольшое вступление, чтобы заинтересовать читателя",
   "Show": "Показать",

src/components/Views/Edit.module.scss

@@ -13,6 +13,8 @@
 }
 
 .container {
+  position: relative;
+
   .titleInput,
   .subtitleInput {
     border: 0;
@@ -97,3 +99,45 @@
     }
   }
 }
+
+.scrollTopButton {
+  cursor: pointer;
+  left: 2rem;
+  position: sticky;
+  top: calc(100vh - 40px);
+  width: 2.8rem;
+  z-index: 2;
+
+  @include media-breakpoint-down(md) {
+    display: none;
+  }
+
+  @include media-breakpoint-up(xl) {
+    left: 4rem;
+  }
+
+  &:hover {
+    .icon {
+      opacity: 1;
+    }
+
+    .scrollTopButtonLabel {
+      display: block;
+    }
+  }
+
+  .icon {
+    opacity: 0.4;
+  }
+}
+
+.scrollTopButtonLabel {
+  display: none;
+  @include font-size(1.4rem);
+  font-weight: bold;
+  left: 100%;
+  padding-left: 0.5em;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}

src/components/Views/Edit.tsx

@@ -13,6 +13,7 @@ import { translit } from '../../utils/ru2en'
 import { Editor } from '../Editor/Editor'
 import { Panel } from '../Editor/Panel'
 import { useEditorContext } from '../../context/editor'
+import { Icon } from '../_shared/Icon'
 
 type EditViewProps = {
   shout: Shout
@@ -73,8 +74,20 @@ export const EditView = (props: EditViewProps) => {
     setForm('slug', slug)
   }
 
+  const scrollTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+
   return (
     <>
+      <button class={styles.scrollTopButton} onClick={scrollTop}>
+        <Icon name="up-button" class={styles.icon} />
+        <span class={styles.scrollTopButtonLabel}>{t('Scroll up')}</span>
+      </button>
+
       <div class={styles.container}>
         <Title>{t('Write an article')}</Title>