Creating a Scroll to Top Button for Your JupiterX Website

Having a scroll-to-top button on your website can enhance user experience by allowing visitors to quickly navigate back to the top of the page. Here's how you can easily add one to your JupiterX website:

Step 1: Edit Your Global Footer Template

• Access your WordPress dashboard.
• Go to "JupiterX" and then to "Layout Builder"
• Inside the Layout Builder, navigate to "Footer" and select the global Footer template to edit.

Step 2: Add the Button Widget

• Within the Elementor editor panel, drag and drop the JupiterX "Button" widget to the end of your footer content.

Step 3: Customize the Button

• In the Button widget options, remove any text label and instead, choose an upward arrow icon.
• Switch to the "Style" tab and customize the button's appearance to match your website's design.

Step 4: Adjust Button Settings

• Go to the "Advanced" tab and then "Layout."
• Set the Position to "Fixed" and apply the following settings:
  • Horizontal Orientation: Right
  • Horizontal Offset: 30px-50px
  • Vertical Orientation: Bottom
  • Vertical Offset: 30px-50px

Step 5: Add Scrolling Effects

• Still in the Advanced settings, select "Motion Effects."
• Turn on "Scrolling Effects."
• Configure the "Vertical Scroll" to direct upwards with a Speed of "3" and a Viewport from "0%" to "25%."
• Set the Effects Relative To "Entire page."

Step 6: Make Responsive Adjustments

• In the "Responsive" section, choose to hide the button on tablet and mobile devices if it interferes with your design or navigation on smaller screens.

Step 7: Link the Button

• Go back to the "Content" tab for the button and in the "Link" field, enter #go-to-top .

Step 8: Set Up the Anchor in the Header

• Now, go back to the "JupiterX" > Layout Builder to edit your Global Header template.
• Add an HTML widget or a "Divider" widget at the top of your header content and set its height to "0px."
• Navigate to the "Advanced" section for this widget or divider and assign the CSS ID go-to-top .

Testing Your Scroll to Top Button

After saving all your changes, it's time to test the scroll-to-top button:

• Visit the frontend of your website and scroll down a page.
• Click the scroll-to-top button.
• You should smoothly scroll up to the top of the page.

By following these steps, you've successfully added a scroll-to-top button to your JupiterX themed website. It not only improves navigation but also enhances the overall look and feel of your site.