Navigating to the bottom of a page using a <<link>>

Authoring Twine
1

Twine Version: 2.4.1
In some of my text passages I incorporate links that add an additional paragraph of text below the main text, but above the links at the bottom of the page when clicked. In pages with longer passages sometimes the new text appears off the bottom of the screen. I would like to also automatically scroll to the bottom of the page when the link is clicked. I’ve been playing around with anchor tags but can’t make it work. I can do it in two separate links:

An <<link "old rowboat" href="#extraDetail">><<replace "#extraDetail">><<include "rowboat">><</replace>><</link>> is on the shoreline, hauled halfway out of the water, its sky blue paint weathered and peeling.
<a href="#extraDetail">Jump to bottom</a>

Is there any way of combining the above two links or something else I could do to the top link to make it scroll to the bottom of the screen?

2

You can’t put html in Sugarcube markup like that. You want to use <<link>> and <<replace>> with a span or div html element at the bottom of the page to scroll to. You need the <<scrollTo>> custom macro. I forgot who created the macro but it works well. The code for it needs to be cut and pasted into the javascript section of your story.

Main passage should look like this

An <<link "old rowboat">><<replace "#rb">><<include "rowboat">><<ScrollTo 'rb' false>><</replace>><</link>> is on the shoreline, hauled halfway out of the water, its sky blue paint weathered and peeling.

<span id = "rb"></span>

Copy and paste this into your javascript section

Macro.add('ScrollTo', {
	skipArgs : false,
	handler  : function () {
		if (this.args.length > 0) {
			var Value = this.args[0];
			if (typeof Value === "string" || Value instanceof String) {
				var element = null, params = undefined;
				if (this.args.length > 1) {
					params = this.args[1];
				}
				// wait for element
				var elementWaitID = setInterval(function () {
					element = document.getElementById(Value);
					if (element != null) {
						// stop waiting and set scroll position
						clearInterval(elementWaitID);
						if (params != undefined) {
							element.scrollIntoView(params);
						} else {
							element.scrollIntoView();
						}
					}
				}, 100);
			}
		}
	}
});
/* <<ScrollTo>> macro - End */
3

That one is a HiEv macro (Sample Code)

4

I managed to do this via Javascript. I’m not sure if this is what you’re looking for, but I basically set up a listener that checks for any appends made to the story text, and always auto-scrolls to the bottom.

This applies to ALL things that are in the #passages display area. You’ll have to modify it if you only want it to apply to certain links.

function scrollToBottom() {
    var elem = document.getElementById('passages');
    elem.scrollTop = elem.scrollHeight;
}

// Create a MutationObserver to observe changes in the #data div
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        // Scroll to bottom when child nodes are added or attributes change
        if (mutation.type === 'childList' || mutation.type === 'attributes') {
            scrollToBottom();
        }
    });
});

// Select the target node
var targetNode = document.getElementById('passages');

// Configuration for the observer
var config = { childList: true, subtree: true, attributes: true };

// Start observing the target node with the configured options
observer.observe(targetNode, config);