Skip to main content

Scroll to Top

After Turning on Blocks from Grigora's Kit Dashboard.

We can use Scroll to Top Block in Site Editor/Blog/Page from Toggle Block Inserter.

Insert Scroll to Top from listed Blocks.

Once Scroll to Top is inserted, select the Scroll to Top.

After selecting Scroll to Top , Go to block settings, in block settings we see Geenral, Styles and Advanced of settings and we'll be exploring them one by one.

General​

Show After Scrolling : Here we have to define pixels for scroll to tops visibility using unit input, default value is 400 px.

Only show when scrolling up after toggling on the button, this will work on scrolling up.

Smooth Scrolling allows you to scroll smoothly.

Icon : Icon can be changed here.

Size : Size can be changed using text input. Value entered uses pixels as its unit.

Position

Static : By default, every element has a static Position, therefore the element will follow the usual page flow. If a left/right/top/bottom/z-index is set, the element will have no impact.

Relative : An element specified with the position attribute relative is positioned in relation to its default position. A relatively-positioned element will be moved from its default position if the top, right, bottom, left and z-index properties are changed.

Absolute : Absolute positions an element relative to its parent, affecting the layout around it.. The top, right, bottom, left, and z index properties provide offsets from the contained block's boundaries.

Fixed : When an element has position: fixed;, it is placed relative to the viewport, meaning it always remains in the same spot regardless of how far the page is scrolled.The element's position can be adjusted using the top, right, bottom, left, and z index attributes.

Sticky : A mix of fixed and relative position is sticky positioning. When the element reaches a predetermined threshold, it is considered as fixed positioned; before to that, it is treated as relative positioned.

Advanced​

Color​

(Colors can be applied normal and On-hover)

Icon: It changes color of Icon in Scroll to Top. We get two options to choose colors i.e. ColorPicker and Color Palette.

Background: Background changes Background color of Scroll to Top and we get two options to choose colors i.e. ColorPicker and Color Palette.

Advanced​

Layout​

Padding : Padding can be applied to Icon, by clicking on unlink padding can be applied to specific sides , only numbers can be entered and has pixel as unit.

Margin : Margin can be applied to Icon, by clicking on unlink margin can be applied to specific sides, only numbers can be entered and has pixel as unit.

Border​

(Border can be applied normal)

Radius : Under Radius we can also change border radius. By clicking on Unlink sides we can change radius of any particular side.

  • Minimum value is 0px.
  • Maximum value is 100px.
  • Default value is 4px.

Box Shadow​

(Box Shadow can be applied normal)

Box Shadow casts a shadow across the Scroll to Top.

  • Color : Box shadow color can be changed using the Colorpicker or Color Palette.

  • Blur : Box shadow can be blurred with Blur effect. Value entered uses pixels as its unit.

  • Horizontal : Box shadow can be applied Horizontally. Value entered uses pixels as its unit.

  • Vertical : Box shadow can be applied Vertically. Value entered uses pixels as its unit.

  • Spread : Box Shadow can be spreaded. Value entered uses pixels as its unit.