#5

What theme are you using? That grey looks :+1:.

If it is a custom CSS, could you please share?

#6

Originally it’s the Warmth theme from the Community themes. But since it got some layout issues therefor I did get help from people in Discord to tweaks some of the css codes… yet since it’s long ago I don’t quite recall which file is changed. You may try applying the Warmth theme and see it yourself. :slight_smile:

#7

interesting. should it be added only to the end of the page or it can be used as a snippet

#8

As @Archie said, add the CSS as a snippet, not inline in the page. See Preferences → Appearance → Snippets.

1 Like
#9

As snippet right? I see… let me try it out.
Thanks guys~~

1 Like
#10

See if I get it right…

I made a BackToTop.css and put that into the snippets folder:

.BackToTop {
  width: 80px;
  height: 40px;
  border-radius: 10px 10px 0px 0px;
  background-color: white;
  box-shadow: 0px 5px 10px #darkgrey;
  text-align: center;
  padding-top: 1.5%;
  line-height: 100%;
  font-weight: bold;
  font-size: 14px;
  color: white;
  position: fixed;
  bottom: 0;
  right: 5%;
  margin: 0;
}

Then I pair the ^TOP and <span class="BackToTop">[[#^Top|TOP]]</span> in the page I want to insert the “Back to top” button. Seems it is working fine.

CleanShot 2021-06-15 at 21.16.19
CleanShot 2021-06-15 at 21.16.19740×1080 167 KB

2 Likes
#11

You got it.

I think you could even do .internal-link[data-href="#^Top]" as the selector, so you don’t need the span tag at all. I also switched the background colour to use a variable so that it should look better in different themes or in light mode:

.internal-link[data-href="#^Top"] {
  width: 80px;
  height: 40px;
  border-radius: 10px 10px 0px 0px;
  background-color: var(--background-primary-alt);
  box-shadow: 0px 5px 10px #darkgrey;
  text-align: center;
  padding-top: 4%;
  line-height: 100%;
  font-weight: bold;
  font-size: 14px;
  color: white;
  position: fixed;
  bottom: 0;
  right: 5%;
  margin: 0;
}

With the above, you can just write [[#^Top|TOP]] anywhere in the document and the CSS will pick it up.

1 Like
#12

Wow!! Thank you sooo much @ryanjamurphy ! Really learnt a lot from here!! :smiley:

2 Likes
#13

Awesome, a little but awesome addition!
I’ve one issue though,
If I click on the new top button, a new window of the same note opens, instead to jump back at the beginning of the current note… Is this expected behavior?

#14

One can also go to the start/end of a note by using the command goStart/goEnd from the following plugin:
c4ctus5/editor-commands-remap: Obsidian plugin to map hotkeys to editor commands

#15

Hi Jopp, if things went well, pressing the top button should bring you directly back to the top on the same page. Unless if you had Pin the current page, then every link you click on the page would being opened as a new windows (including the “top” button, which actually is a link by nature).

#16

If you are familiar using command or hotkeys, maybe the plugin suggested by @Wen would lead you a better user experience as it isn’t rely on hyper-links thus would be more streamline then the tedious setup and limitations of using the “back to top” button. :slight_smile:

#17

Dear all,

another possibility is to:

  • install editor-commands-remap plugin
  • install customizable-page-header-buttons
  • create (manually) a new button “Back to top” to start the command (Go start) from the page header. To do this, it’s necessary to add the following lines to data.json inside customizable-page-header-buttons plugin folder:
{
      "id": "editor-commands-remap:go-start",
      "icon": "double-up-arrow-glyph",
      "name": "Go to start (back to top)",
      "showButtons": "desktop"
}

The main problem so far: the solution only works in Editor Mode, not in Preview Mode. :disappointed_relieved:

#18

@ryanjamurphy i am trying your code, it shows the button but clicking on it doesn’t work and it says there is no such a section. i think i am missing something here but can’t figure out what

#19

Good news: after updating Obsidian to v.0.13.14, the new default editing mode (Live Preview) gives me the best of both worlds. The button works (since it’s editing mode) and I can see results of Dataview queries.

#20

I too tried your code and I can see the button but I have 2 major issues with it:

  1. The button disappears after I scroll down a little ways.
  2. When I click the button it does nothing, but the popout says “unable to find section #^Top”
1 Like
#21

I too find the button disappearing sometime when scrolling down. But it would re-appear when scrolling further down. Maybe there’s some kind of css code conflict? But due to my very limited knowledge on css I’m really not sure.

As for the “unable to find section #^Top” situation, did you type the " ^Top" line on the page top? (remember leaving a space before “^”)

CleanShot-2022-01-07-at-10.47.38.png

#22

i am using this: [[#^Top|TOP]] adding a space before ^ does nothing, but i guess i am doing something wrong. using ^Top also doesn’t work

#23

Just for double checking, I copy the following instruction directly from the comment section of the “BackToTop.css” file. May not be relevant to your case but won’t hurt anyway. As for me I use this function on a daily basis and it still working fine currently.

To use this function:
1. first put a " ^Top" as an anchor at the begining of the page (exclude the double quotation marks)
2. then put “[[#^Top|TOP]]” at the end of the page (exclude the double quotation marks)
** As for the " ^Top" anchor, remember there’s a space before “^” ("[space]^Top")

1 Like
#24

Thank you! there was not mention of " ^Top" anchor on top. now it works. Awesome !