Streaming live at 10am (PST)

Section position after Display: Block on Trigger Interaction


#1

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


#2

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


#3

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

Cheers!

mrHunt


#4