Added Back To Top Button

[Kapileswar-Moharana]

Issue Title: Back to Top Button Issue Number: #7

Close #7

Checklist:

• [x] I have mentioned the issue number in my Pull Request.
• [x] I have commented on my code, particularly in hard-to-understand areas
• [x] I have created a helpful and easy-to-understand README.md
• [x] The Back To Top Button works well on different devices.

A small Description of the project :

Description:

This pull request enhances the functionality of the "Back to Top" button in the HTML document by adding smooth scrolling behavior and dynamic visibility based on the user's scroll position. Here are the key changes:

CSS:

Improved the styling of the button for better user experience. Added a smooth transition effect on hover to make the button more interactive.

JavaScript:

Added a click event listener to the "Back to Top" button. When clicked, the page now smoothly scrolls back to the top. The button dynamically appears when the user has scrolled down more than 200 pixels and hides when they are near the top of the page. These enhancements provide a smoother and more user-friendly experience for navigating the webpage.

Here is the Video Illustration of the Feature:

https://github.com/divyanshudhruv/Minifolio/assets/129049677/d6a3a532-fdca-40ac-a8b0-414ecfc9fada

[divyanshudhruv]

Cool but can you stlye the back to to button as Know more button when hover as it is our theme i.e the background should be green and text as white only when hover

[Kapileswar-Moharana]

stlye the back to to button as Know more button when hover as it is our theme i.e the background should be green and text as white only when hover

Done Check the video below and merge it @divyanshudhruv sir

https://github.com/divyanshudhruv/Minifolio/assets/129049677/76fe33e6-c253-4f89-ae0e-8a6c03304535

[divyanshudhruv]

Cool but instead of the black color for the icon use the shade of blueblack color(the color used in the text of home section). If possible

[divyanshudhruv]

Also try to lighter the shade of the the hover green color of button. You may use colorhex website for that.

[divyanshudhruv]

Alsonset the background color to f0f0f0

[Kapileswar-Moharana]

@divyanshudhruv All 3 tasks are done now check the changes here below are some Screenshots

[divyanshudhruv]

Cool just shift the button to a little more top and a little more left.

[Kapileswar-Moharana]

Cool just shift the button to a little more top and a little more left.

@divyanshudhruv I don't think it will look good because it is in perfect position, Should I make these changes because I uploaded the photo by cropping screenshots, make sure that

[Kapileswar-Moharana]

Cool just shift the button to a little more top and a little more left.

@divyanshudhruv What to do sir? Dushra PR bhhi karnaa haii ?

[divyanshudhruv]

Ok then leave it I'll merge

[divyanshudhruv]

Can you publish the forked site to gh page? I may see that

[Kapileswar-Moharana]

Ok then leave it I'll merge

Can you publish the forked site to gh page? I may see that

Sorry not understand ?

[Kapileswar-Moharana]

Can you publish the forked site to gh page? I may see that

@divyanshudhruv https://github.com/Kapileswar-Moharana/Minifolio is it ?

[divyanshudhruv]

I mean publish to gh pages, so that I can live preview

[divyanshudhruv]

I wanna ask that why you deleted .btn in line 10 ?

[Kapileswar-Moharana]

I mean publish to gh pages, so that I can live preview

@divyanshudhruv Check https://kapileswar-moharana.github.io/Minifolio/

[divyanshudhruv]

In line 10 of button.css you deleted all the div of .btn. So it is creating error. Please revert back the deleted .btn div in button.css file to stop the error

[divyanshudhruv]

Also increase the zindex of the back to top button high as it is overlapping the footer. Else all good

[divyanshudhruv]

[Kapileswar-Moharana]

@divyanshudhruv already updated Check it

[Kapileswar-Moharana]

I wanna ask why you deleted .btn in line 10.

2 Days before I synced the fork at that time may this fault occur? or maybe I deleted the files mistakenly

[Kapileswar-Moharana]

@divyanshudhruv are there any other issues?

[divyanshudhruv]

Cool, will merge soon

[Kapileswar-Moharana]

Cool, will merge soon

@divyanshudhruv WHEN?

[divyanshudhruv]

@Kapileswar-Moharana merge. Congrats

[Kapileswar-Moharana]

@Kapileswar-Moharana merge. Congrats

@divyanshudhruv Thanks