Back to top scroll

[Wimgbax]

After I was able to make a fixed header with a transparent start of the header I now wish to get a “back to top” button on my pages at the bottom of page.
I found a jQuery script and css to make it, but I have to place the following code according to my information to the functions.php of the footer but that is not the way to do it in WeaverXtreme.
This code is

<a href="#" class="topbutton"></a>

where can I put this code in Weaver Xtreme 
Is it possible to place this in advanced options HTML insertion PAGE CONTENT BOTTOM ?

[scrambler]

these are called anchors and there are already some in place in the theme that you can use.

There is one at the top

<a id=#page-top” href=”#page-bottom”>↓</a>

and there is one at the bottom

<a id=#page-bottom” href=”#page-top”>↑</a>

They are hidden by default with the rule

#page-top, #page-bottom {display:  none;}

So you have two possibilities:

1- Use them as is by simply adding the rule below in Main options > FOnts & Custom > Custom CSS Rule box so they become visible (arrows at the top left and bottom left)

#page-top, #page-bottom {display:  inline-block;}

2- or keep them hidden, and Insert your own button anywhere you want to link to the anchor using the anchor ID

For example a link like below inserted anywhere in your content will jump to the top of the page when people click on it.

<a href=”#page-top“>Go back Up</a>

EDIT: You actually need to have the anchors visible for them to work, so you need to add the rule in 1- no matter what

[Wimgbax]

Thank you Scrambler.
Just a question for clarification.

I don’t need a Jquery script ?

[scrambler]

No, this is simple HTML, and the HTML that creates the anchor is already inserted in the page by the theme.

So you only need to use what is there with one of the two methods explained above.

Note: I edited the original post as you need to make the anchors visible for them to work

[scrambler]

If you use solution (2) which is to insert your own link to jump to the top or bottom, and do not want to see the little arrows at the top and bottom of the page, you can modify the rule that makes them visible to be

#page-top, #page-bottom {display:  inline-block;position:absolute;color:transparent;}

This will make the anchors active and usable with your own button / link, but the little arrows will not be visible on the page.

[Wimgbax]

Hello Scrambler,
I did a quick check with method 1, I saw indeed the tiny arrow at the bottom and top of the page.So it is at the bottom and top of the page not at bottom or top of the screen.
I checked method 2 by adding this code in advanced options html insertion bottom content.
I saw at the bottom of the page ( not screen ) the Go back Up.By the way on all pages that is what I expected.

I just saw you second message , I will play further with your suggestions.
If I want this to show up on a scroll action then I have to use jQuery.
I let you know when I have further progress.
Again thank you very much for all your excellent support.

Regards

Wim Bax

[scrambler]

if you want a button in a fixed position on the screen, just style that button with a fixed position.

Activate the anchors with the last rule I gave you (with the yellow highlight).

Then add a link with a fixed position like below in the pre wrapper HTML Insertion area

<a id=”mytop” href=”#page-top” style=”position:fixed;bottom:40px;background-color:red;”>Go back Up</a>

If you want the button to only swo up when you scroll, then set the display to noen by default with the rule below in the custom css rule box

#mytop {display:none;}

and use jQuery in your scroll script to change the display when scrolling

jQuery(‘#mytop’).css(‘display’,’block’);

[Wimgbax]

I have taken the following steps

I inserted in  custom css as you suggested

#page-top, #page-bottom {display:  inline-block;position:absolute;color:transparent;}

I inserted in the prewrapper HTML insertion area

<a id=”mytop” href=”#page-top” style=”position:fixed;bottom:40px;background-color:red;”>Go back Up</a>

Go back Up appears with the red background at the bottom of the page ( not the screen) and by clicking it does not go back to the top

So I placed this code in the Page content Bottom HTML insertion area,
now the red Go back Up appears on the bottom of the screen and if I scroll it remains nicely at the bottom of the screen and by clicking it goes back to the top.

So my next test will be the step with jQuery

[scrambler]

You may need to add a high z-index to the link so it is visible and clickable

<a id=”mytop” href=”#page-top” style=”position:fixed;bottom:40px;background-color:red;z-index:1000;”>Go back Up</a>

[Wimgbax]

Sofar the links were always visible without the z-index but it never harms by adding this z-index.

[Wimgbax]

It is working

I have inserted the following in CSS

#page-top, #page-bottom {display:  inline-block;position:absolute;color:transparent;}

#scrollToTop{
    width:100px;
    height:130px;
    padding:10px;
    text-align:center;
    background: whiteSmoke;
    font-weight: bold;
    color: #444;
    text-decoration: none;
    position:fixed;
    bottom:20px;
    right:40px;
    display:none;
    background: url(‘Arrow-Up.png’) no-repeat 0px 20px;
}
#scrollToTop:hover{
    text-decoration:none;
}

I have inserted in advancved options HTML insertions in the Page Content Bottom area

<a id=”scrollToTop” href=”#page-top” >Scroll To Top</a>

and in the advanced options head section

<script type=”text/javascript”>
jQuery(document).ready(function(){
   
    //Check to see if the window is top if not then display button
    jQuery(window).scroll(function(){
        if (jQuery(this).scrollTop() > 100) {
            jQuery(‘#scrollToTop’).fadeIn();
        } else {
            jQuery(‘#scrollToTop’).fadeOut();
        }
    });
   
   
   
});
</script>

[Author]

Posts