Call button appear like Back to top button

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

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.

Hi there,

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

https://stackoverflow.com/a/32856377

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? :D

I'm so grateful for that.

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>

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

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

Now I fix it following your guide, but the call button doesn't appear anymore :(

Where can i see this ?

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

Hi David,

Can you help me take a look?

Thank you

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

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