fix: page scroll with URL hash redirection. (#4883)

app/components/public/side-menu.js

@@ -4,6 +4,7 @@ import Component from '@ember/component';
 import moment from 'moment';
 import { SPEAKERS_FILTER } from 'open-event-frontend/routes/public/speakers';
 import { tracked } from '@glimmer/tracking';
+import $ from 'jquery';
 
 @classic
 export default class SideMenu extends Component {
@@ -13,12 +14,19 @@ export default class SideMenu extends Component {
   @tracked
   showSessions = false;
 
+  async didRender() {
+    super.didRender();
+    const anchor_tag = window.location.hash;
+    $('html, body').animate({
+      scrollTop: $(anchor_tag).offset().top
+    }, 20);
+  }
+
   async didInsertElement() {
     super.didInsertElement(...arguments);
     const speakersCall = await this.event.speakersCall;
     this.set('shouldShowCallforSpeakers',
       speakersCall && speakersCall.announcement && (speakersCall.privacy === 'public'));
-
     this.checkSpeakers();
     this.checkSessions();
   }
@@ -46,12 +54,22 @@ export default class SideMenu extends Component {
   }
 
   @action
-  scrollToTarget() {
+  scrollToTarget(e) {
+
+    if (history.pushState) {
+      history.pushState(null, null, e);
+    } else {
+      location.hash = e;
+    }
+    document.querySelector(e).scrollIntoView({
+      behavior: 'smooth', block: 'start'
+    });
+
     document.querySelectorAll('.scroll').forEach(anchor => {
       anchor.addEventListener('click', function(e) {
         e.preventDefault();
         document.querySelector(this.getAttribute('href')).scrollIntoView({
-          behavior: 'smooth'
+          behavior: 'smooth', block: 'start'
         });
 
         document.querySelectorAll('.scroll').forEach(node => {

app/templates/components/public/side-menu.hbs

@@ -1,11 +1,11 @@
 {{#if (and (not-eq this.session.currentRouteName 'public.cfs.new-session') (not-eq this.session.currentRouteName 'public.cfs.new-speaker') (not-eq this.session.currentRouteName 'public.cfs.edit-speaker') (not-eq this.session.currentRouteName 'public.cfs.edit-session'))}}
   <div class="ui fluid vertical {{unless this.device.isMobile 'pointing'}} menu">
     {{#if (eq this.session.currentRouteName 'public.index')}}
-      <a href='#info' {{action "scrollToTarget"}} class='item active scroll'>
+      <a href='#info' {{action "scrollToTarget" '#info'}} class='item active scroll'>
         {{t 'Info'}}
       </a>
       {{#if this.event.tickets.length}}
-        <a href='#tickets' {{action "scrollToTarget"}} class='item scroll'>
+        <a href='#tickets' {{action scrollToTarget '#tickets'}} class='item scroll'>
           {{t 'Tickets'}}
         </a>
       {{/if}}
@@ -57,17 +57,17 @@
     {{/if}}
     {{#if this.event.hasOwnerInfo}}
       {{#if (eq this.session.currentRouteName 'public.index')}}
-        <a href='#owner' {{action "scrollToTarget"}} class='item scroll'>
+        <a href='#organizer' {{action scrollToTarget '#organizer'}} class='item scroll'>
           {{t 'Organizer'}}
         </a>
       {{else}}
-        <a class="item" href="{{href-to 'public.index'}}#owner">
+        <a class="item" href="{{href-to 'public.index'}}#organizer">
           {{t 'Organizer'}}
         </a>
       {{/if}}
     {{/if}}
     {{#if (eq this.session.currentRouteName 'public.index')}}
-      <a href='#getting-here' class='item scroll'>
+      <a href='#getting-here' {{action scrollToTarget '#getting-here'}} class='item scroll'>
         {{t 'Getting here'}}
       </a>
     {{else}}

app/templates/public/index.hbs

@@ -58,7 +58,7 @@
     <div class="ui hidden divider"></div>
   {{/if}}
   {{#if this.model.event.hasOwnerInfo}}
-    <h2 class="ui header" id="owner">
+    <h2 class="ui header" id="organizer">
       {{t 'Organized  by'}} {{this.model.event.ownerName}}
     </h2>
     {{sanitize this.model.event.ownerDescription}}