Top of Page Button

bonapictura · 2017-07-18 23:32:19

Hi,

I'm working on upgrading my site from CE3 to Backlight and I'm very happy with what I've seen from Backlight so far.
Kudos to Matthew and Ben, and many contributors on this forum, for making this easy to use platform. It's a big step forward compared to CE3.
Now to my question:
In my CE3 site I have a link in the footer to go back to the top of the page. I was searching the forum to do the same in Backlight and I found a post from Monte Trumbull with a much more elegant solution:
http://community.theturninggate.net/vie … hp?id=6175

I tried to implement this in my test site http://bldev.bonapictura.nl
but it's not working properly. I can get the button to display and it works when I click but it's not behaving the same as the one on Monte's site https://www.montetrumbull.com/
It's supposed to appear when you scroll down a bit and disappear when you're back on top of the page. And it should slowly scroll back to top.
So apparently the <script> part is not working on my site. I must be doing something wrong, can anyone help?
I added this to my custom php:

function ttg_footer_bottom( $style, $path ) { 
    echo '
    <a href="#top" class="btn-scroll-to-top" title="Top of page" style="display: inline;"><i class="fa fa-arrow-up fa-lg"></i></a>
    
    <script>
    $(document).ready(function() {
        $(".btn-scroll-to-top").click(function() {
            $("html, body").animate({ scrollTop: 0 }, "slow");
            return false;
        });
        $(window).scroll(function() {
            if ($(this).scrollTop() > 200) {
                $(".btn-scroll-to-top").fadeIn();
            } else {
                $(".btn-scroll-to-top").fadeOut();
            }
        });
    });
    </script>
    ';
}

and this to my css:

.btn-scroll-to-top {
    background-color: transparent;
    display: none;
    position: fixed;
    bottom: 5px;
    right: 5px;
	border: 1px solid;
	height: 32px;
	width: 32px;
	border-radius: 50%; 
    text-align: center;
	line-height: 29px;
	vertical-align: middle;
    text-decoration: none;
    color:#6f7c80;
}
.btn-scroll-to-top:hover {
    text-decoration: none;
    color:#000000;
}

Last edited by bonapictura (2017-07-18 23:35:24)

rod barbee · 2017-07-19 00:32:27

Hi John,

looks like the reason that the button is always appearing is the bold part in this line of your code:

inline styling will override any css (unless you use !important;) so the display: none; in your custom css for the .btn-scroll-to-top class isn't being used.

So try removing style="display: inline;" from your phplugins code.

charlie.choc · 2017-07-19 01:24:00

I just tried that code and it behaves the same way for me with or without display: inline. The arrow stays at the bottom and does return to the top but doesn't scroll up and down like Monte's.

Last edited by charlie.choc (2017-07-19 01:24:20)

rod barbee · 2017-07-19 01:37:24

you could try comparing Monte's original version (posted some time ago) with what he actually has on his website. Backlight has changed a bit since then and he may have also tweaked his css.

rod barbee · 2017-07-19 01:39:52

When I remove style="display:inline;" from the code on John's page using the browser inspector, the arrow disappears from the page.
I haven't tried the code myself yet though.

charlie.choc · 2017-07-19 01:46:43

I actually cut and pasted the code from his site.

rod barbee · 2017-07-19 02:08:52

I just got it to work on a test site.
http://test.barbeephoto.com/galleries/s … -top-test/
The button doesn't showing until you scroll down a bit.

The only changes I made were that I used the ttg_scripts hook and that I removed style="display: inline;" from the html in the phplugins file

I did have to add a little more css. Since this is using a standard Backlight Pangolin page template, the footer bottom-pallet is active and the scroll to top button, while visible, is still below the footer. Adding some z-index to the anchor element fixed that.
I added this to the custom css:

a.btn-scroll-to-top {
	z-index: 3;
}

charlie.choc · 2017-07-19 02:26:24

Thanks.

rod barbee · 2017-07-19 02:42:19

John,
this is off-topic but you'll probably soon notice some weirdness in your navigation menu, specifically with the sub-menu items in the flyout menu. It's being fixed for the next update. See this thread if you're curious about it: http://community.theturninggate.net/vie … hp?id=7857

bonapictura · 2017-07-19 03:15:44

Thanks a lot Rod,
Now it works. It was probably because I was using the wrong hook. I started with ttg_body_bottom like it says it Monte's original post (CE4). Then I tried ttg_main_bottom and ttg_footer_bottom, to no avail. I only added the style="display: inline;" to make it visible at all.
Putting it in the ttg_scripts hook did the trick.
And thanks for showing the z-index setting, otherwise that would be my next question

charlie.choc · 2017-07-19 04:43:25

I should probably know this, but is there a reason this doesn't work on my blog? Works fine on everything else.

rod barbee · 2017-07-19 07:55:56

my guess is that you can't use the ttg_scripts hook with WordPress. You probably need to create a child theme and enqueue the scripts

charlie.choc · 2017-07-19 09:10:36

Thanks. I do have a child theme so I'll look at that when I get back off the road.

dussel · 2018-05-27 02:35:19

Hello Rod,
found your amazing script and tried to add it to my Backlight Pangolin.
but i failed...

i added this code to my phplugin.custom-rl.php

This line is Nr. 491 in my phpfie:
<a href="#top" class="btn-scroll-to-top" title="Top of page"><i class="fa fa-arrow-up fa-lg"></i></a>

if i tried to call my testpage i got this Error:

Something went wrong

Unexpected error: syntax error, unexpected '<' in phplugins-pangolin-rl.php on line 491

Please report error at http://community.theturninggate.net
-----------

without this code the site works.

Do you have an idea where my fault is?

I would appreciate any suggestions.
Thanks for your feedback in advance.

Have a lovely day ahead!
Best regards,

Rolf

rod barbee · 2018-05-27 02:51:51

the script actually came from Monte Trumbull, I just modified a couple of things.

How did you add the code? Can you post the entire function?

You may have added some code outside of the echo statement

See: http://ttg-tips-and-tricks.barbeephoto. … ght-pages/

dussel · 2018-05-27 21:41:36

Hej Rod,
i got it... My fault and you are right... i added outside the funktionarea...
So now it works...
Great stuff... Thanks for that and your awesome "wiki"-Page to Backlight and TTG

Sven · 2019-06-28 20:56:43

Hey there,
I've tried to integrate the code on my page as well: www.sven-michael.com but unfortunately it is not working.
Here is the php code I've used

Any ideas / solutions?

Many thanks in advance and Krgds
Sven M

Last edited by Sven (2019-06-28 21:26:33)

rod barbee · 2019-06-28 21:11:58

Is this in Backlight 1 or 2?

Sven · 2019-06-28 21:23:12

Backlight 2

rod barbee · 2019-06-28 23:14:54

two problems I see.
one: function body_bottom is not a Backlight 2 phplugins function. Use function scripts() instead

are you starting with the latest phplugins sample file? You should be using the phplugins-pangolin-sample.php file from the current Backlight-2-Installer-xxx/backlight/custom/phplugins/ folder.
That file also lists all of the hooks you can use.

two: your css contains a media query that's not closed properly.

Sven · 2019-06-30 00:59:25

Hi Rod,

many thanks!

I've changed to the latest phplugins sample file and have corrected the code to "function scripts()".
Not it shows up, but unfortunately at the wrong position (left bottom instead right one) and only below the footer.
The css is also not applied.

The css code I'm using is (the unclosed media query should be fixed now - thx!!):

.btn-scroll-to-top {
background-color: transparent;
display: none;
position: fixed;
bottom: 5px;
right: 5px;
border: 1px solid;
height: 32px;
width: 32px;
border-radius: 50%;
text-align: center;
line-height: 29px;
vertical-align: middle;
text-decoration: none;
color:#6f7c80;
}

.btn-scroll-to-top:hover {
text-decoration: none;
color:#000000;
}

a.btn-scroll-to-top {
z-index: 3;
}

Any ideas?

Cheers
Sven M

Daniel Leu · 2019-06-30 03:01:16

Looks like you got it working now.

Sven · 2019-07-04 01:57:55

Yes, many thanks Rod :-)

Community @ The Turning Gate

#1 2017-07-18 23:32:19

Top of Page Button

#2 2017-07-19 00:32:27

Re: Top of Page Button

#3 2017-07-19 01:24:00

Re: Top of Page Button

#4 2017-07-19 01:37:24

Re: Top of Page Button

#5 2017-07-19 01:39:52

Re: Top of Page Button

#6 2017-07-19 01:46:43

Re: Top of Page Button

#7 2017-07-19 02:08:52

Re: Top of Page Button

#8 2017-07-19 02:26:24

Re: Top of Page Button

#9 2017-07-19 02:42:19

Re: Top of Page Button

#10 2017-07-19 03:15:44

Re: Top of Page Button

#11 2017-07-19 04:43:25

Re: Top of Page Button

#12 2017-07-19 07:55:56

Re: Top of Page Button

#13 2017-07-19 09:10:36

Re: Top of Page Button

#14 2018-05-27 02:35:19

Re: Top of Page Button

#15 2018-05-27 02:51:51

Re: Top of Page Button

#16 2018-05-27 21:41:36

Re: Top of Page Button

#17 2019-06-28 20:56:43

Re: Top of Page Button

#18 2019-06-28 21:11:58

Re: Top of Page Button

#19 2019-06-28 21:23:12

Re: Top of Page Button

#20 2019-06-28 23:14:54

Re: Top of Page Button

#21 2019-06-30 00:59:25

Re: Top of Page Button

#22 2019-06-30 03:01:16

Re: Top of Page Button

#23 2019-07-04 01:57:55

Re: Top of Page Button

Board footer