[Resolved] Call button appear like Back to top button

[Tan]

Hi there,

I have a Call button element on my site (mobile version). It always shows at the bottom when the website has finished loading.

If I want the Call button element to show only when a visitor scrolls down to the footer like the effect of back to top button, is there any option or CSS code snippet for that?

Thank you.

[Ying]

Hi Tan,

It will require custom JS, CSS only can not work in that way.

You should be able to find a lot examples to learn from, eg.
https://webdesign.tutsplus.com/tutorials/animate-on-scroll-with-javascript–cms-36671

[Tan]

Hi Ying,

I follow this guide from David. It works perfectly when people scroll to the footer.

Could you help me adjust this snippet from David to make the button show up once I hit 300px from the top of the page?

Thank you.

[David]

Hi there,

for scroll position from top then use the JS method provided here:

https://stackoverflow.com/a/32856377

[Tan]

Hi David,

Could you explain in more detail how to use this snippet in my scenario?

I’m not too familiar with coding. So can you teach me step by step like you did there? 😀

I’m so grateful for that.

[David]

Ok, so i the original code, you have the Javascript and the CSS.
Leave the CSS as is.
Change the Javacript to:

<script>
var scrollpos = window.scrollY;
var header = document.querySelectorAll('.site-footer');

function add_class_on_scroll() {
    header[0].classList.add("in-view");
}

function remove_class_on_scroll() {
    header[0].classList.remove("in-view");
}

window.addEventListener('scroll', function(){ 

    scrollpos = window.scrollY;

    if(scrollpos > 10){
        add_class_on_scroll();
    }
    else {
        remove_class_on_scroll();
    }

});
</script>

[Tan]

I have a fatal error on line 1 when applying the JavaScript. It is like this.
Can you check it again?

[Tan]

Sorry David. It’s my fault for PHP error.

Now I fix it following your guide, but the call button doesn’t appear anymore 🙁

[David]

Where can i see this ?

[Tan]

You can see it in private information box (include temporary login link)

[Tan]

Hi David,

Can you help me take a look?

Thank you

[David]

I made a mistake in the JS. I just updated the script in your Call Button Animation Hook. And updated the code above.

This line of the code:

if(scrollpos > 10){

The 10 is the number of pixels from the top of the page, increase that to 300

[Tan]

Thank you so much David. It worked like a charm! 😀

[Author]

Posts