How can I make a "Go to Top" Button for a scrollable widget?

#1

I’m not having any luck. The docs for the scrollable widget and tm-scroll message hint that it’s possible to have a button that could return the scrollable area back to the top. I’d like to have an “always visible” button in the scroll area that returns the scroll area back to the top. Is there a way?

The following is one variation that’s I’ve tried unsuccessfully.

<$scrollable>
<div id="list-top"></div>
<!-- Here is a list widget generating a lot of lines -->
<$button>
<$action-sendmessage $message="tm-scroll" $name="selector" $value="#list-top"/>
Back to Top
</$button>
</$scrollable>
#2

I’m not sure – is your question about making a button that scrolls to the top, or making the button always visible?

For the first part, this seems to work on TiddlyWiki .com:

<style>
.tc-scrollable-demo2 {
	border: 1px solid <<colour message-border>>;
	background-color: <<colour message-background>>;
	padding: 1em;
	height: 100px;
	position: relative;
}
</style>
<$scrollable class="tc-scrollable-demo2">
<div id="list-top"></div>
<$list filter="[tag[HelloThere]]">

</$list>
<$button>
<$action-sendmessage $message="tm-scroll" $name="selector" $value="#list-top"/>
Back to Top
</$button>
</$scrollable>

For the 2nd question, I would try seeing if the button could use absolute positioning to put it just outside the scroll box.

1 Like
#3

I don’t know.

You’re example worked on tw-com. It worked on my wiki when I changed just the filter to make long list from my tiddlers.

It didn’t work when I put the same code in my tiddler. That is until I changed the anchor from list-top to list-top1 even though I can’t find any reference to another list-top in the entire wiki. I used a text editor to search the wiki for list-top - there is only one reference - mine. Still when I changed it to list-top1 it worked. Bizarre.

But thanks for confirming my example should have worked.

And yes I wanted both - a button to scroll to the top which also stays visible.

Thanks again.

EDIT - I think I know what the problem was… the tiddler was open in the sidebar as well and being open in the story river so there were in fact 2 list-top id’s. duh.

1 Like
#4

You can define an anchor using standard html and place it in a tiddler, perhaps not displaying anything and tag it $:/tags/AboveStory

Then a href link to the anchor with or without an icon on click will jump to the top.

I will look at Marks code/solution if it produces the floating button.

Perhaps the best solution would be a “top” link in the MenuBar (plugin) ?

I have a Jump list menu, which show the open tiddlers in a menu bar drop down so you can jump to any tiddler in the story, and we could add a top and bottom to that as well.

1 Like
#5

On a related issue I just posted this;