Scroll down to new content, Twine, Sugarcube

[ScrunglyAlleyCat]

I'm digging into this myself and will update if I find out how- at the moment, I use linkappend to break up long pages and separate out videos. I'd like for when you click on a linkappend, for the page to scroll down to the new content- I'm not 100% sure how to do that. Does anyone know?

 

[ScrunglyAlleyCat]

Okay so I found a solution!

Part one is this scrolldown macro, which whenever called scrolls the screen down to the bottom of the page.

You must be registered to see the links

The second is the <<timed>> function in sugarcube, which makes text show up after a delay. By combining a scrolldown with a fast speed and a 40ms delay on the appearance of the next text, the screen scrolls down far enough for you to see the video when you click the link, but not right to the bottom of the page. Might be a bit of a bodge job technically speaking but if it works it works!

 

[osanaiko]

Twine is a thin layer over HTML+Javascript browser content.

In a web page you would accomplish this with an "anchor" tag (or some equivalent like a named/id'ed container div element) at the start of your new section and then use a javascript function to smoothly scroll that anchor to the position you want (generally a bit offset from the top of the viewport).

If you speak "frontend web-dev" then this S.O. link would be a good starting place:

You must be registered to see the links

 

[guest1492]

Spoiler: non-viable suggestion

You don't have permission to view the spoiler content. Log in or register now.

EDIT:
I thought about this some more and this won't actually work out well for your purposes. Basically, this code says to check for link append macros whenever there is a passage transition and then scroll to the inserted content when that link is clicked. However, it sounds like you are nesting multiple link append macros which means that this code only works for the first one since that is the only one that exists at the time of the passage transition.

To get the above code to work in that situation, it would need to also scan the appended content for link append macros as well (so turn it into some kind of recursive function which calls itself). Other methods include modifying the code for the link append macro itself (or creating your own macro to use in its place) or using a mutation observer to check for changes to the displayed passage (seems like overkill).

Untested recursive function:

const attachClickAndScroll = function (el) {
    $(el).find('.macro-linkappend').each( function (index, elem) {
        const insert = $(elem).next().get(0);
        $(elem).one('click', function () {
            insert.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
            attachClickAndScroll(insert);
        });
    });
}

$(document).on(':passagerender', (ev) => attachClickAndScroll(ev.content) );