feat: added ScrollToTopButton

[sambhavgupta0705]

Description

• Added a scroll to top button for all pages of website
  

Related issue(s)

Fixes #1350

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	5d90f14
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/642dd6b7f78d04000898d361
😎 Deploy Preview	https://deploy-preview-1396--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	33
🟠 Accessibility	88
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	30

Lighthouse ran on https://deploy-preview-1396--asyncapi-website.netlify.app/

[akshatnema]

Please make this button with white background, some shadows and an arrow white in color. That color scheme will match more with the website theme.

[sambhavgupta0705]

@akshatnema is this a good option for scroll to top button?

[akshatnema]

@akshatnema is this a good option for scroll to top button?

Not like this exactly, you will have an arrow up in the dark-gray or black color, but no borders around it in dark black color.

[sambhavgupta0705]

@akshatnema is this a good choice for scroll to top button?

[sambhavgupta0705]

I have pushed the tentative changes for now ,so that you can see the changes in netlify deploy

[akshatnema]

@akshatnema is this a good choice for scroll to top button?

You need to do some more changes related to image, as it looks large in the desktop view. Please make it slightly smaller and then make a circular block element with white background and provide box-shadow to it, so that it looks like a button.

[sambhavgupta0705]

@akshatnema is this a good choice for scroll to top button?

You need to do some more changes related to image, as it looks large in the desktop view. Please make it slightly smaller and then make a circular block element with white background and provide box-shadow to it, so that it looks like a button.

ok ,got the idea of all the changes I need to do. Will get back to you soon.

[sambhavgupta0705]

@akshatnema I have made the changes,PTAL.

I have one approach for this that we can make the middle arrow as white and have a rounded border around it in blue color (the same color which is present in footer) or a little dark blue.

[akshatnema]

Kindly remove the previous arrow image and add the current arrow image in SVG format. It is not a vector image right now.

Also, add the property scroll-behavior to the HTML tag inside global.css and provide it's value as smooth.

[tamalCodes]

Hi @sambhavgupta0705 , i would highly recommend you to make this a little bit smaller. For mobile devices the button looks huge. Which might be having a bad effect on the overall UI/UX.

And also since majority of the website uses #1B1031 as their color theme, i would recommend using the same color in the svg's arrow too.

[sambhavgupta0705]

Hey @akshatnema PTAL

[akshatnema]

There is a small overlap between the add-this component and button. Kindly make the component position such that they don't overlap on any screen.

[akshatnema]

Some comments added.

[akshatnema]

/rtm