Creating a "To The Top" Button in NEKO360

How to Add a "To the Top" Button to Your Website in NEKO360

Overview

Ever scrolled down a website and thought, "How do I get back up there without destroying my finger on the scroll wheel?" That’s where the magical “To the Top” button comes in. Adding this feature not only improves your website’s user experience but also saves your visitors the thumb workout. If you’re working on NEKO360 (a fancy, whitelabeled version of DUDA), here’s how you can sprinkle some functional magic onto your pages with a “To the Top” button.

Steps to Add a "To the Top" Button in NEKO360

1. Select the Row and Add an Anchor

• Open the page you’re editing in the NEKO360 editor.
• Click on the topmost row of the page (usually the header or hero section).
• From the toolbar, select Add Anchor, because every great journey to the top starts with a solid anchor.

2. Name the Anchor

• Give your anchor a name like “Top” to make it clear.
• Uncheck the “Add to Navigation” box, unless you want your “Top” anchor proudly parading in your site’s menu, which probably isn’t ideal.

3. Add an Icon to the Page

• Drag and drop an Icon Widget to the page. You can place it anywhere for now—we’re just setting things up.

4. Select an Arrow Icon

• From the icon library, pick an upward arrow that says, “Let’s go places!” (but vertically).

5. Customize the Button Appearance

• Style your button so it looks sleek and fits your site’s vibe:
  • Color: Pick something noticeable but not blinding.
  • Hover Animation: Add a little flair—maybe a bounce or color shift—to keep things lively.
  • Size: Big enough to find, small enough not to shout, "LOOK AT ME!"

6. Enable the Floating Button Option

• In the icon’s Settings, toggle on Floating Button.
• By default, the button will hover in the bottom-right corner, like a helpful little guardian angel.
• Adjust the position if needed, but don’t let it cover important content.

7. Set Visibility for the Current Page Only

• Turn on the “Show Only on This Page” option to avoid having your button appear on every page where it might not make sense.

8. Link the Icon to the Anchor

• Under the Content tab, click Link This Icon.
• Choose Link to an Anchor, then:
  • Select the current page from the dropdown.
  • Pick the “Top” anchor you created earlier.

9. Test the Button Functionality

• Click the Preview button to take your new feature for a spin. Scroll down, click the button, and enjoy the smooth journey back to the top—no elevator music needed.

10. Repeat for Other Pages

• Rinse and repeat for all other pages on your site that need this button. Your visitors will thank you (even if silently).

Best Practices

• Positioning: Keep the button in the same spot across all pages. Consistency is key—don’t make your visitors go on a scavenger hunt to find it.
• Design Cohesion: Use the same style across pages to keep your site looking polished and professional.
• Visibility: Make the button noticeable but not so bold that it competes with your actual content.
• Mobile Optimization: Test the button on phones and tablets. No one likes a button that hogs the whole screen on mobile.

Adding a "To the Top" button is like adding a cherry on top of a sundae—it’s the small detail that makes everything a little sweeter. So go ahead, give your users the ultimate scrolling shortcut, and watch as they metaphorically high-five you for making their lives easier.

Visual learner? Watch the video!