Streaming live at 10am (PST)

Section position after Display: Block on Trigger Interaction

Hi all,

I’m a new user to Webflow and finding it quite fantastic.

I have successfully implemented an interaction to show a section that is set to hidden at load. Within this trigger action, I have also successfully used a link setting to scroll to the desired section.

My question is: is it possible to set the positioning of where the previously hidden section appears or where the page should specifically stop scrolling? I would like for the section to line up directly below my header (I’ve seen how this can be done with a nav bar, but I’m looking to do it with a button trigger action).

Any help would be appreciated-thank you!

MrH

Hi @mr_hunt, this might work for you, just paste the code into your Custom Code section of your site in the Before Body code panel. I have commented the code sections what is happening and what unique ID’s were:

<script>
        $(document).ready(function (){
            
            // #click is the unique name of your button
            $("#click").click(function (){
                
                    //$(this).animate(function(){
                    
                    $('html, body').animate({
                        
                        // #div1 is the unique id of the element on your page you want to scroll to.
                        // This script will scroll you so that the top of the element is aligned with
                        // the browser window.
                        
                        scrollTop: $("#div1").offset().top
                        
                        // Set the time it takes in milleseconds to scroll
                        
                    }, 2000);
                //});
            });
        });
</script>

See if something like that works for you. Cheers, Dave

Thank you! Looks like your solution is working-triggered sections are displaying like I wanted them to now.

Cheers!

mrHunt

1 Like