[Feature Request][Code provided] "Go to Current" button in Story Map

When you click "View Story Map" there is a parameter added

https://chyoa.com/story/Misogyny-Heaven.61039/map?chapter=1534707​

I think the backend will render the HTML of the story map such that the current chapter has this CSS class

<div class="story-map-chapter current" style="margin-left: 0px;"></div>​

Problem: An author I follow will publish a new chapter after several months. I want to reread the entire branch that the author wrote. I cannot find the branch in the story map because the story has many branches.

Suggestion: Can we add a button that allows us to automatically scroll to the current selected chapter? Below is some code that auto-scrolls to the HTML element with class="current"

Possible Issues: We don't always load the whole story map (at least not on mobile). The button will do nothing if the element is not present. If this blocks the feature, the only fix I can think of is to always load enough of the story map to include the current chapter.

Demo: I wrote some code to (1) add the button in the story-map page and (2) auto-scroll to the current chapter. Open up the Story Map of any story. You can paste the following into your browser console to see a demo.

(function () {
// locate the .controls container inside the header
const controls = document.querySelector('.story-map-header .controls');
if (!controls) return;

// create a new btn-group
const group = document.createElement('div');
group.className = 'btn-group';
group.setAttribute('role', 'group');

// create the button
const b = document.createElement('button');
b.id = '__goto_current_btn';
b.type = 'button';
b.className = 'btn btn-big';
b.textContent = 'Go to Current';

b.onclick = function () {
const el = document.querySelector('.story-map-chapter.current');
if (!el) return;

// Attempt 1: Try page scroll (doesn't work for me, but is recommended by Mozilla)
el.scrollIntoView({behavior:'smooth', block:'center'});

// Attempt 2: Try story-map-content scroll if it exists and is scrollable
const scroller = document.querySelector('.story-map-content');
if (scroller && scroller.scrollHeight > scroller.clientHeight) {
const rect = el.getBoundingClientRect();
const base = scroller.getBoundingClientRect();
const offset = rect.top - base.top;
const target = scroller.scrollTop + offset - (scroller.clientHeight / 2);
scroller.scrollTo({top: target, behavior: 'smooth'});
}
};

// append button to new group, then group to controls
group.appendChild(b);
controls.appendChild(group);
})();
​

 

@Friedman just want to make sure you see this one. No worries if it is not possible or if you would rather not support this feature. Just thought I'd share since I would find it convenient

 

Thanks for this! “Go to Current” is now live on the story map pages. Appreciate the nudge. If you spot any quirks, just let me know.