[Resolved] Call button appear like Back to top button

Home Forums Support [Resolved] Call button appear like Back to top button

Home Forums Support Call button appear like Back to top button

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #2377834
    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.

    #2377882
    Ying
    Staff
    Customer Support

    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

    #2378181
    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.

    #2379813
    David
    Staff
    Customer Support

    Hi there,

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

    https://stackoverflow.com/a/32856377

    #2380006
    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.

    #2380198
    David
    Staff
    Customer Support

    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>
    #2380569
    Tan

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

    #2380583
    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 πŸ™

    #2380921
    David
    Staff
    Customer Support

    Where can i see this ?

    #2380930
    Tan

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

    #2384786
    Tan

    Hi David,

    Can you help me take a look?

    Thank you

    #2385162
    David
    Staff
    Customer Support

    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

    #2400828
    Tan

    Thank you so much David. It worked like a charm! πŸ˜€

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.