Highlighted

How do YOU create your "Back to Top"?

Explorer ,
Mar 09, 2020

Copy link to clipboard

Copied

I was wondering how folks in our RH community create your best way of "Back to Top" feature. I would like to efficiently create a "Back to Top" link in multiple places on my usually very long topic, so user are used to seeing Back to Top link when they start scrolling down the topic. Example screenshot below. Thank you, all.

(using RH2017 screen as an mockup/example)

backtotop.png

Views

401

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How do YOU create your "Back to Top"?

Explorer ,
Mar 09, 2020

Copy link to clipboard

Copied

I was wondering how folks in our RH community create your best way of "Back to Top" feature. I would like to efficiently create a "Back to Top" link in multiple places on my usually very long topic, so user are used to seeing Back to Top link when they start scrolling down the topic. Example screenshot below. Thank you, all.

(using RH2017 screen as an mockup/example)

backtotop.png

Views

402

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Mar 10, 2020

Copy link to clipboard

Copied

Only Adobe can answer how they did it and this is mainly a user to user forum.

 

I recalled an old post by someone who frequented these forums many years ago. He posted a solution where I believe the link scrolls better than some solutions. Read this thread and in particular the solution from MergeThis.

 

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 10, 2020

Copy link to clipboard

Copied

Oops. Posting the link as well would help.

 

https://community.adobe.com/t5/robohelp/rh9-html-a-back-to-top-button-for-long-topics/m-p/3297265?pa...

 

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 10, 2020

Copy link to clipboard

Copied

If you wanted to change the existing back to top button to text, rather than a cryptic image, you could add this as a custom css file in your skin's User Assets section:

 

This is based on making it approximately match Azure Blue in RH2019 New, so you could adjust fonts, colours, sizes etc to your liking.

 

Pasting this code into the RH2019 Classic layout.css file also works, so it might work for RH2017 as well, but I haven't tried it.

 

body.media-desktop div.topic a.to_top {
background-image: none;
background-image: unset;
width: auto;
border-top: 1px solid rgb(14,92,166);
border-left: 1px solid rgb(14,92,166);
border-right: 1px solid rgb(14,92,166);
border-radius: 10px 10px 0 0;
padding: 5px;
font-size: 0.5rem;
}
div.topic a.to_top:before {
content: "Back to top";
font-size: 0.8rem;
font-family: Arial;
color: rgb(14,92,166);
text-decoration: underline;
}

image.png

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Mar 11, 2020

Copy link to clipboard

Copied

Thank you so much, Peter and Amebr. I will try both suggestions as soon as I have time. Will report back my result.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 11, 2020

Copy link to clipboard

Copied

Oh, I forgot to add that you only need "background-image: none;" line if you need to target IE11. The 'unset' version works for everything else.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Mar 24, 2020

Copy link to clipboard

Copied

I'm so sorry, Amebr and Peter. I think I'm not explaining this well. What I have done when my topics get so long is to insert a Back to Top hyperlink every 3-5 long paragraphs (or when I think the screen has to start to vertical scroll) using a Bookmark feature. My question is, is Bookmark the best solution? Or is there something in RH 2019 that's canned/generic/basic feature/etc. that I am missing? Thank you so much again, Amebr and Peter.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 24, 2020

Copy link to clipboard

Copied

If you want a back to top link every few lines, you'll need to add those links manually where you want them.  As a personal preference, I wouldn't create links all over the page, but would rely on the single built-in back to top button I mention in my previous post. It's always visible and not hard for users to access. My other post describes how to change it from an icon to readable text.

 

It should be possible to use a snippet, if you're set on adding links everywhere, to save a bit of time. Assuming you only want to jump to the top of the page, of course. 

 

Another time saver could be the trick of using a '#' as the href works in your output. In the past, if you specified just '#' as the href, the link would jump to the top of the page. You'd have to check if it works in your output, and obviously would only be relevant if you are wanting to jump to the top of the page every time.

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Apr 07, 2020

Copy link to clipboard

Copied

Amebr - Thank you so much as always. As soon as I have time, I will try it right away. Thank you again.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...