• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How do YOU create your "Back to Top"?

Participant ,
Mar 09, 2020 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

500

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
community guidelines
Community Expert ,
Mar 10, 2020 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.

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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
community guidelines
Community Expert ,
Mar 10, 2020 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...

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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
community guidelines
Community Expert ,
Mar 10, 2020 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

 

Votes

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
community guidelines
Participant ,
Mar 11, 2020 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.

Votes

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
community guidelines
Community Expert ,
Mar 11, 2020 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.

Votes

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
community guidelines
Participant ,
Mar 24, 2020 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.

Votes

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
community guidelines
Community Expert ,
Mar 24, 2020 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.

 

 

Votes

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
community guidelines
Participant ,
Apr 07, 2020 Apr 07, 2020

Copy link to clipboard

Copied

LATEST

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

Votes

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
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp