How do I insert a "Back to Top" on a page with multiple anchors?
I have a page with a list of Anchor items at the top of the page. There are 2 issues I am finding. When linking to the Anchors below, part of the content is being hid by "Sticky Menu".
I also have a "Back to Top" link at the bottom that goes to a "top" anchor, but again it is not going to the Top of the webpage.
Can someone give me a better way to doing this?
Thanks,
Paul
Paul T.
shared this idea
-
John McClelland
commented
Here is a fix for the back-to-top issue. Put a gadget at the very top of the page and put nothing in it but the "top" anchor. I was already using "top" on 40 pages, so I put "page-top" in that uppermost gadget. It worked on a test page and now I have put it atop the template for our most-used page format and can begin retrofitting where needed. You can see the first page using it at
https://aoj.wildapricot.org/discussion-archives
and scroll down the center column to click very-top.
Thanks for raising a question that led to an existing solution. -
Konstantin
commented
If you are struggling only with sticky menu behavior, then you can try this:
1) Start editing your page
2) Press on the gadget with "back to top" link
3) Press "edit html" button in top panel
4) In html code, find your "back to top" link code, it could look like this:
<a href="#top">to top</a>
to top - is your link name
5) Add "href="#" onclick="$(window).scrollTop(0)" to the <a> tag, so it will look like this:
<a href="#" onclick="$(window).scrollTop(0);">to top</a>6) Save your page
It will scroll to the real top of the page now.
-
Konstantin
commented
Hi Paul,
You can always use different names for anchors, there is also a way do do "Back to top" link by using JS.
If you will provide us with site link, we will post some solutions here. Maybe someone else will find them useful as well.
