Display scroll to top button

It's all working well, and looking neat, BUT NOW I NEED SOME ADVICE for the next step!
I would like to set the distance to bottom to e.g. 164px [looks better if the button is not getting absorbed into the dark footer], but then I REALLY need to add FIRST that kind of Javascript that makes the button disappear when the page is at its top already. Assuming it is Javascript that does a thing like that?
I already got some script kindly donated through a Facebook group found through a link here, but it did not work. Possibly because the target [id?] of the standardJavascript was not identical to the button name [address?] that I used in the code block on the page, and my attempt to makethem identical did not work. I assume adding the script to the page header code injection was the right place for it?
My website is www.riverdaleruralholidays.com if anyone cares to take a look. Pic below is how my button looks. Ideally, the button should not go further down on scroll than stopping just above the footer [I know how to adjust that, it looks goodif I setbottom:164px in the Custom CSS] but then I want the buttonto disappear when the top of the page is in view and appear only when scrolling down. It now shows the button about halfway the viewport if the top of the page is already visible, so that looks a bit weird seeing it next to the first image on the page. Sofor now I left it set to bottom:12px. But even then it would be better if it appeared only when scrolling down as you don't need it when you are at the top of the page.
Maybe I should add that I also have a smooth scroll instruction in the Custom CSS, not sure whether that could interfere? That reads
html {
scroll-behavior: smooth;
}

I would need some Javascript [I guess?] that isworking from the names and id that my code in the code block already has, or a bit more instruction how to adjust if it is a standard code.

Link to comment
  • 1

tuanphan

Posted March 22

tuanphan

    • Share
Posted March 22

Try adding this to Code Injection > Footer

$[document].ready[function [] { $[window].scroll[function [] { if [$[this].scrollTop[] > 200] { $['a#back-to-top'].fadeIn[]; } else { $['a#back-to-top'].fadeOut[]; } }]; $['.scrollup'].click[function [] { $["html, body"].animate[{ scrollTop: 0 }, 600]; return false; }]; }];

  • Mirabal78 and bjohnsonxar
  • 2

Email meif you have need any help [free, of course.]. Answer within 24 hours.

How to:Setup password & share url-Insert Custom CSS-Page Header-Upload Custom Font-Upload File-Find Block ID-Contact Customer Care

Link to comment

Video liên quan

Chủ Đề