Tutorial: How to add a "Scroll to Top" button on your website

Elements Tutorials
1

Hey :wave:

If you want to include a “scroll to top” button on your website we’ve recorded a short tutorial showing you how to do exactly that!

As promised in the video, the code below that can be pasted straight into a custom component and used in your website (no configuration needed).

@portal(bodyStart)
 <!-- Scroll to Top Button -->
  <div x-data="{ showButton: false }" 
       x-init="window.addEventListener('scroll', () => { showButton = window.scrollY > 200; })" 
       class="fixed bottom-8 right-8 z-50"
  >
    <button
      x-show="showButton"
      x-transition:enter="transform transition ease-out duration-300"
      x-transition:enter-start="translate-y-20 opacity-0"
      x-transition:enter-end="translate-y-0 opacity-100"
      x-transition:leave="transform transition ease-in duration-300"
      x-transition:leave-start="translate-y-0 opacity-100"
      x-transition:leave-end="translate-y-20 opacity-0"
      @click="window.scrollTo({ top: 0, behavior: 'smooth' })"
      class="bg-brand-500 text-white p-3 hover:scale-[110%] rounded-full hover:shadow-md hover:bg-brand-600  transition"
      title="Back to top"
    >
      <!-- Arrow Icon -->
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
      </svg>
    </button>
  </div>
@endportal

Feedback

If you have any questions or comments on today’s tutorial please let us know. We love hearing your feedback!

Cheers,
Dan & Team Realmac

6 Likes
2

First, love seeing you using custom GPTs and I love seeing it work in Elements. I do have a question. (keep your groans to a low rumble if you don’t mind) Since context is so important to using GenAI, why not build and keep a Realmac generated custom GPT that has the rules for creating custom Components (e.g. the sections for the html, styles, js, and to only use tailwind and alpine) built-in so that you get very specific answers to your custom component queries?

In your first query, the GPT gave you the full code as if you are coding from scratch and you had to know which parts were needed to prevent a problem. In your custom GPT you could specify what you want the output to look like and avoid all of that and keep the GPT focused.

1 Like
3

I played around with creating a custom Elements GPT and trained it on sample code and our unfinished docs, but it was still getting stuff wildly wrong, and was annoying to try and use.

I should probably give it another go as that was many months ago and I’m a lot more familiar with how these tools work now…

4

Sadly this happens a lot. And getting the same thing twice is difficult if not impossible. I’m not saying it isn’t getting better all the time but it is a long way off from production quality. Please don’t build a product around AI expecting it to be the end all-cure all.

2 Likes
5

Have to agree with @Flash. I feel like our approach to AI should mimic Apple’s approach. Make it useful, enjoyable, and easy to use for the end user, not something they have to spend a lot of time learning how to use just to use it. I don’t think the average RW user, or RW’s target market, wants to bother with learning how to use a custom GPT to get relevant information about the product. If that were the case we could just shut down the forum and replace it with a custom GPT to answer everybody’s questions.

On that point, I’m also not thrilled seeing copy/pastes of AI generated answers creeping into forum posts without any human provided context or explanation. I feel people come here to get help from humans, I’d like to keep it that way for as long as possible. :stuck_out_tongue:

Could be wrong about all of that though, in a few years AI will probably be able to replace all of us. :crazy_face: :robot:

EDIT: Just to make clear, Dan’s tutorials showing how to use AI to build custom components, enhance RapidWeaver, and other fun stuff are exactly how I think AI should be used, a human showing an example on how to prompt the AI, how to implement the results in the product, and showcasing the outcome for everybody to see how it works, even providing demos they can play around with. This is the way. :smile:

1 Like
6

There seems to be a huge misunderstanding here. I did not suggest or imply building AI into Elements. In Dan’s tutorial he was using a Tailwind specific custom GPT. While this might provide some utility with generating pure Tailwind stuff for more IDE-based website development (think Bbedit), there significant differences when it comes to using Tailwind and any other specific libraries that Elements uses inside of Elements. I only suggested the it would be worth it to build a custom GPT that is tuned for Elements rather than use a generic custom GPT that knows nothing about Elements. This is the modification of an outside tool to build assets for use inside of Elements. Very like using Pixelmator to create image/icon assets for your project.

Regarding the wildly wrong comments: yes, it will get things wrong. It is not infallible…much like programmers. GenAi is like a musical instrument. It needs tuning to perform correctly. If you don’t use it well, don’t blame the instrument. Check your own skill first.

**Just to make clear, my comment was suggesting that Dan use a good version of AI to show how to use AI to build components! :grinning:

1 Like
7

I stand corrected if I misunderstood what you were saying. But please do it a year or two from now. We need to get this shipped and stabilized before we wander off on a tangent or what may ultimately be a red herring as it pertains to the marketability of Elements.

8

I know that what I have to say here will not please (but at the moment what I have to say rarely pleases in the world of website creation…), but in two years it will be much too late because those who will not have waited will be ready and in production. The delay is obvious here, not recognizing it risks posing a serious problem. It would be time to stop with the avoidance of AI, it is no longer tenable. As an example, last weekend I trained my vocal clone (an agent in AI terms) to do the voiceovers of my upcoming videos, it took me 5 hours, it is operational. I have already fed Chatgpt and Perplexity so that they write my scripts (in the style I want) from a plan that I provide. I provide a script for a 10-minute video in less than one. So I have a lot of time available for other things. It was science fiction a year ago and I didn’t believe it then. I have since corrected my approach with the more than rapid evolution of AI tools.
For the design of my three websites, given the deadlines for Elements and Stackspro, I returned to “manufacturing” myself, hmm correction, to having the AI ​​manufacture the pages and scripts. I supervise and customize. I am incapable of all this without this AI help, I specify, or with delays that are too long compared to Divi for example. Results: my sites are finished where I still have a little work with RW/Stacks5 (after three months all the same spent on it) and nothing at all with Elements and Stackspro.
I conclude this article by indicating that when the “agents” are available to clone a web builder (I am talking about a human here) it will be too late to wonder if AI would be good in two years.
I like to build a site like Elements will propose but I fear that there will really not be many of us left in this case when it is commercially released.
Ignoring everything I have said since the beginning of this article, the only question that remains is: will there still be enough of us to financially allow the survival of the companies whose products interest us today at the price at which they will be forced to sell their products to be profitable given the number of customers?

1 Like
9

WE need to get this shipped??? are you on the development team now!!

10

Just to be clear I wasn’t talking about building AI into Elements now, I was referring to creating a custom GPT (that anyone can do) inside of ChatGPT!

We’re 100% focused on shipping a stable build of Elements without AI — We have some great ideas on how we could integrate it (and actually make useful), but that will all have to wait until next year…

With that out of the way, let’s try and keep this topic on track and focus on the tutorial!

1 Like
11

It must be recognized that if we remove all the articles that have nothing to do with the tutorial, there is nothing left :rofl:

1 Like
12

No need to worry. All you are doing is expressing your feelings and experience by providing insight into what you have accomplished. Just like we are. :smiley:

I have no insight into what RM can realistically get done. Judging by the number of tutorials @dan has put together, AI is clearly on the radar.

Perhaps we should be better at providing a sounding board. Is he demoing things that we would find useful? Is the workflow good and logical? Interestingly, I use AI for a lot of writing. However, for me, when I build design, I am a pure drag and drop guy. I have had no success with it building code that did not require a lot of debugging and fiddling. For that reason I ignore tutorials like this. Sorry Dan.

13

Hi @Flash I think you are touching on what we have already discussed together, with Brian I think, the definition of the target clientele is missing, so we don’t really know why and/or who it was done. I am like you, I support Realmac for a drag&drop Wysiwyg layout product (in short RW/Stacks without the bugs). There I am lost (twice today is a lot): what will we have at the end? I like to laugh for two minutes with AI, a piece of copy-pasted code and hop we have cubes that rotate on themselves, but that’s for fun (a correct and serious use of AI implies something quite different). We can’t stop at “I try, it works, I publish”. There are going to be big surprises in terms of bugs, online security…
I know that this is not the subject, here an up scroll button generated by an AI in Tailwind css, but frankly that’s not how we make a product. I don’t understand half measures, and I think that’s the moment we’re in, it’s uncomfortable to have a big gap that lasts too long, it’s not impatience, it’s a lack of clarity

1 Like
14

See my answer over here. Let’s continue there if you want.

16

2 posts were merged into an existing topic: Elements target market