Join the Webstudio community

Updated last month

internal linking transition

At a glance

Does someone knows how to make a transition when clicking on a link that lead to a section in the current page ?
For now, when i click my link, it effectively jumps to the corresponding section but has absolutely no transition (it just "teleport" the view to the section where I want it to sliiide to the section)

5 comments

JJohn Siciliano

you can put this in an html embed

Plain Text

<style>
 * {
        /* Make links scroll to their sections smoothly. */
        scroll-behavior: smooth;
    }
</style>

KKobra

it works like magic
thanks

BBogdan

Or it can be defined on global root. Btw we could even add it to root preset.

JJohn Siciliano

ah defining on global root is better way forsure

problem with preset, imo, is it might have undesired effects for some

cuz we use client side navigation, if i'm on bottom of contact page, and I click home link, it will navigate and scroll up at the same time. Kinda makes it unknown that a page was changed

BBogdan

You are right

Add a reply