BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> Scripts for Your Website
  New Posts New Posts RSS Feed - Scroll to Top Button
  FAQ FAQ  Forum Search   Register Register  Login Login

Scroll to Top Button

 Post Reply Post Reply
Author
Message
madsgrandad View Drop Down
Groupie
Groupie


Joined: Jul 22 2023
Location: Canada
Status: Offline
Points: 48
Post Options Post Options   Thanks (0) Thanks(0)   Quote madsgrandad Quote  Post ReplyReply Direct Link To This Post Topic: Scroll to Top Button
    Posted: Aug 04 2023 at 1:59pm
I searched for this feature in OE but didn't find it.
I assume its the type of thing everyone makes.

I want to add a "scroll to top" button on my base layer, so its there on all pages.

I was unsure how to make it myself...so I went looking for answers.
I found this complete tutorial on how to code a "scroll back to top" button.
in fact, here is the code in its entirety, ready to install:

Problem is, I have no clue or understanding on how to use code, where to put it, how to "insert it", etc

I bet its simple, if you understand it all. I don't.
Can anyone help me, or show me how to do it within OE .
Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: Dec 30 2015
Location: Germany Frankfu
Status: Offline
Points: 725
Post Options Post Options   Thanks (0) Thanks(0)   Quote digizar Quote  Post ReplyReply Direct Link To This Post Posted: Aug 04 2023 at 3:09pm
Well, well ...
It's much simpler.
Create such entity (usually an Navigation Image Link button element).
Place it to the Base (Layer), or a layer staying with every or especially that page.
Link it to the place you want it to move to.
Recompile, and ist done.
___________________________________
Ask questions only if there is no answer yet.
https://blumendigi.com
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6122
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Aug 06 2023 at 7:48pm
  1. open the base layer
  2. add a new button where you want it
  3. on the configure link page, instead of http, select js:
  4. in the link input box add: topFunction();
  5. Click on the source Code button on top of the working area
  6. Click on the Plus sign to add a code block
  7. The New code block input screen will appear.
    1. Put the name of your choice
    2. select type: Javascript
    3. Position EndBody
    4. Add the code to this block
    5. Make sure to replace WEb15ef1c0ae with your button's id

// Get the button
let mybutton = document.getElementById("WEb15ef1c0ae");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}


Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6122
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Aug 06 2023 at 7:50pm
P.S.  you may require this button to be allways on top.

select your button
Under the Styles tab, Customize tab find the Free Code input field and add the following css code:  

z-index:10000;
Back to Top
madsgrandad View Drop Down
Groupie
Groupie


Joined: Jul 22 2023
Location: Canada
Status: Offline
Points: 48
Post Options Post Options   Thanks (0) Thanks(0)   Quote madsgrandad Quote  Post ReplyReply Direct Link To This Post Posted: Aug 06 2023 at 8:21pm
thank you thank you thank you


Thanks again for the help.
But digizar's comment inspired a different option.

I created these two buttons in Corel.




On my webpage, I dragged an Image link onto the page.
I ascribed the light image as the main image, and the darker one as the moused over image.
I did not change the link destination since it chooses the same page by default.

I only need this on 2 or 3 pages, so I don't want to put it on my base layer.
I'll just copy and paste it to the pages I need it, and the link adjusts to whatever page it's on.
Depending on the finished length of the page, I will drag the button to where I want it.

I think it basically reloads the page, but the effect is a quick jump to the top of the page.
It works great!



Edited by madsgrandad - Aug 06 2023 at 8:26pm
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6122
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Aug 07 2023 at 12:33am
Scrolling to top instead of reloading the page takes less time and data
Back to Top
madsgrandad View Drop Down
Groupie
Groupie


Joined: Jul 22 2023
Location: Canada
Status: Offline
Points: 48
Post Options Post Options   Thanks (0) Thanks(0)   Quote madsgrandad Quote  Post ReplyReply Direct Link To This Post Posted: Aug 07 2023 at 2:33am
I assume its reloading the page? and I'm sure you are correct.

...but since the page is already loaded (in cache) the reset is instantaneous.
Even scroll back to top isn't this fast!
(Internet speeds have improved so much, do we need to worry about these things any more?)

This is not a site with that much traffic, and scale modelers have patience. lol
They won't mind waiting for the page to reset.

Out of the entire site, I will use this on two...possibly three pages.
And, I don't have a good history when it comes to messing with code.

Let me get the site finished (I still have so much work to do!)
and then I can make a backup...and then consider trying more complicated things.

I'm a chicken. lol

Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.359 seconds.