search

klaus78 / Data-Science-Flashcards

A large collection of challenges on Data Science and Machine Learning.
https://klaus78.github.io/Data-Science-Flashcards/
MIT License
26 stars 18 forks source link

Added Back-to-top Button #24

Closed Kapileswar-Moharana closed 1 year ago

Kapileswar-Moharana commented 1 year ago

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

Close #19

Checklist:

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/klaus78/Data-Science-Flashcards/assets/129049677/b9a69ce5-dee8-496f-8bdf-80feb076998e

Kapileswar-Moharana commented 1 year ago

@klaus78 If any Other Changes You want then tell me sir, also check both the PR #23 and #24

klaus78 commented 1 year ago

@Kapileswar-Moharana that new button looks great! Thank you very much!

There are a couple of stuff that I would like to improve in the layout

  1. the top bar "Data Science Flashcards" does not move smoothly when moving from the start view and scroll to the bottom scroll_space

  2. if you click on a header that is very close to the top bar, it will collaps to the top instead of to the bottom foto_1_before_click foto_2_after_click

  3. when you collaps the sections / questions / answer. it is a on - off effect without transition state. It would be good it would be smoother like an animation.

Any collaboration or opinion is welcome

Kapileswar-Moharana commented 1 year ago

@Kapileswar-Moharana that new button looks great! Thank you very much!

There are a couple of stuff that I would like to improve in the layout

  1. the top bar "Data Science Flashcards" does not move smoothly when moving from the start view and scroll to the bottom scroll_space
  2. if you click on a header that is very close to the top bar, it will collaps to the top instead of to the bottom foto_1_before_click foto_2_after_click
  3. when you collaps the sections / questions / answer. it is a on - off effect without transition state. It would be good it would be smoother like an animation.

Any collaboration or opinion is welcome

@klaus78 OK sir I understand the issue look into the codes for a solution (Will try my best to resolve it it by Today), check the PR Too #23 that I fixed that takes to the top on clicking the header(Assigned me that also raised PR, so If you merged it, then it will be better.