Add new anchors in my-settings and handle offset sub-menu height (#3032)

* Add anchors setting and handle offset with sub-meu

* Use PeerTube scroll logic

* Add anchor for top my-settings

* Improve scroller with smooth behavior and css offset

* Fix anchor position when using history navigation

Co-authored-by: kimsible <kimsible@users.noreply.github.com>

1 files changed, 5 insertions, 1 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 1dbdd4064..4f2278414 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -18,6 +18,10 @@ $assets-path: '../../assets/';
   display: none !important;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   /*** theme ***/
   // now beware node-sass requires interpolation
@@ -307,7 +311,7 @@ table {
 
 .anchor {
   position: relative;
-  top: #{-($header-height + 20px)};
+  top: #{-($header-height + 20px)}; // offsetTop scrollToAnchor
 }
 
 @media screen and (max-width: #{breakpoint(xxl)}) {