If you need/want your Anchor link to stop (or leave some space) before a Component on the page you can use the Scroll Padding Tailwind Utility class.

Place the following class scroll-mt-[300px] in the CSS Classes box under Advanced on the Component you're scrolling too. This class will set a offset of 300px, but you can change it to the pixel value you require.

If you want to control the scroll timing (and other options such as easing) when scrolling to an anchor then you can use the Smooth Scroll js library.

To add Smooth Scroll to yoru project, put the following in your project’s Template, just before the closing </head> tag.

  <!-- Load the Smooth Scroll library -->
  <script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15/dist/smooth-scroll.polyfills.min.js"></script>

  <!-- Initialize Smooth Scroll -->
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var scroll = new SmoothScroll('a[href*="#"]', {
        speed: 1000
      });
    });
  </script>

Note the speed option in the docs say this:

[speed] is a number representing the amount of time in milliseconds that it should take to scroll 1000px. Scroll distances shorter than that will take less time, and scroll distances longer than that will take more time. The default is 300ms.

Adding a snow effect to your website is a fun way to bring festive cheer to your projects in December. It creates a cozy seasonal atmosphere, delights visitors, and adds personality to your design, making your site more memorable and shareable. In this tutorial, we’ll show you how to easily implement a lightweight snow animation using JavaScript in Elements, perfect for enhancing your holiday-themed websites.

Element Project File

The completed project file is included below for your convenience.

• Open Snow Demo in Elements

Resources:

Links to the resources used int he Tutorial:

• Snowstorm JS Script by Scott Schiller: https://www.schillmania.com/projects/snowstorm/

• CDN JS: https://cdnjs.com/libraries/Snowstorm

Custom Component Code

If you'd like to create the Custom Component show in the Tutorial, copy and paste the following code into the the Template Properties areas in Elements.

Place the following code in your Template:

@portal(headEnd)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm.js" integrity="sha512-N8H1tAcm2/wJx02Q3FznOerQj4sFIdQJpmntt0/7ufMLh8dH1DFf7Zss+lbL7JwtYJuGVV+cVmWOdTA4x2lOTg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        snowStorm.flakesMaxActive = {{snowAmount}};
        snowStorm.followMouse = {{followMouse}};
    </script>
@endportal

Place the following code into the Properties:

{
    "groups": [{
        "title": "Snow Settings",
        "properties": [{
            "title": "Amount",
            "id": "snowAmount",
            "format": "{{value}}",
            "slider": {
                "default": 50,
                "min": 0,
                "max": 512,
                "round": true
            }
        },
        {
    "title": "Follow Mouse",
    "id": "followMouse",
    "responsive": false,
    "switch": {
        "trueValue": "true",
        "falseValue": "false",
        "default": true
    }
}
        ]
    }]
}

To change the alignment of the built-in Components, use the Margin setting under the Spacing Control. Watch the video below to learn more about setting the alignment of an object.

Center Align

Set the left and right margin to "Auto" to center the component.

Left Align

Set the left margin to "0" and the right margin to "Auto" to left align the component.

Right Align

Set the left margin to "auto" and the right margin to "0" to left align the component.