Create a scroll back to top button #216

SamarthShukla17 · 2024-03-15T06:46:31Z

Fixes

Fixes [Feature] Add a scroll back to top button #168 by @Riddhi9570

Description

This Fix, resolves the issue of adding a scroll back to top button on the cc resource archive page.

Screenshots

Checklist

My pull request has a descriptive title (not a vague title like Update index.md).
My pull request targets the default branch of the repository (main or master).
My commit messages follow best practices.
My code follows the established code style of the repository.
I added or updated tests for the changes I made (if applicable).
I added or updated documentation (if applicable).
I tried running the project locally and verified that there are no
visible errors.

Developer Certificate of Origin

For the purposes of this DCO, "license" is equivalent to "license or public domain dedication," and "open source license" is equivalent to "open content license or public domain dedication."

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

Created a scroll back to top button.

possumbilities · 2024-03-15T14:33:00Z

Hi @SamarthShukla17 thanks for this contribution! I think the approach here needs a little adjustment.

For the actual button the more appropriate element would be an anchor <a>, rather than a <button>, that targets an id set on an existing element at the top of the page, or introducing a span element with that target id as a proper target. That would completely remove the need to have any javascript make the scroll to top behavior occur since an anchor can jump between set ids on a page already.

As for making the button appear after the user has scrolled a certain degree down the page, the amount of scroll needs to be long enough that the button would only appear on longer pages, and any javascript doing this would need to be within a separate .js file, whether that's one that's already there, or a new one. Moving it into a file may also require a slight rewrite of the logic, but it'll keep the logic in a more appropriate location.

I have created a scroll back to top button and an additional js for the same has been created.

SamarthShukla17 · 2024-03-16T04:41:02Z

@possumbilities I have created it using anchor tag, but could not create a new .js file as while running it could not initialize the file correctly. I'm updating the PR so review it once, and provide your feedback.❤️

Made the code more efficient.

SamarthShukla17 · 2024-03-16T04:47:22Z

And, now the scroll to top button only appears after scrolling 1000px.

Updated the JS code for the scroll to top to make it more effective.

SamarthShukla17 · 2024-03-19T10:50:05Z

@possumbilities, @TimidRobot and @annatuma I have updated the JavaScript of the scroll to just define a certain scroll to make the scroll back to top button appear, i.e., 1000 px and have created an anchor tag in html and linked it with the top of the page to completely remove any requirement of extra JavaScript. This makes the code more concise and apt. Kindly review it and provide feedback if any further changes are required. Thanks❤️❤️.

docs/index.html

Created a separate JS file for the scroll behavior.

SamarthShukla17 · 2024-03-26T11:18:53Z

Hey @possumbilities, I have created a separate file for JS, removing any requirement for the href"#" and also added a smooth behaviour on scroll.

docs/scroll.js

docs/style.css

Added the required end of the files and also fixed the document indentation of css file.

TimidRobot · 2024-04-12T00:57:40Z

@SamarthShukla17 please resolve conflicts

SamarthShukla17 · 2024-04-15T05:36:39Z

Resolved the conflicts.

possumbilities · 2024-04-15T20:22:45Z

docs/scroll.js

@@ -0,0 +1,11 @@
+document.addEventListener("DOMContentLoaded", function() {
+    let stt = document.getElementById("stt");


if the element in question is changed to only have a class, you'd need to use a querySelector to grab it by class here, but if not then disregard.

possumbilities · 2024-04-15T20:22:53Z

docs/index.html

+
+<h2 style="text-align: center; "><a href="/all">See all</a></h2>
+
+<a href="#the-top" class="stt" id="stt" title="scroll to top">Back To Top</a>


I'd opt for a class here, rather than an id. We don't need both. If there's good cause for the id instead, I'm open to it, but its redundant to have both.

I'd also suggest it be spelled out to be more semantic and descriptive.

So rather than a class or id of: stt, it would be better as scroll-to-top

possumbilities · 2024-04-15T20:25:52Z

@SamarthShukla17 I added two minor comments. That should be the remainder of adjustments. I'll give this a small window to make those adjustments before moving to Approval.

Removed id tag, as only class will do the work, changed the class name and replaced getElementById with querySelector.

…thShukla17/cc-resource-archive into Created_scroll_back_to_Top

SamarthShukla17 · 2024-04-16T07:18:07Z

Resolved the remainder of adjustments as required.❤️❤️

possumbilities · 2024-04-16T14:18:30Z

docs/_layouts/listing.html

@SamarthShukla17 I think you've accidentally added a bunch of html here you didn't mean to?

Oh, I'm sorry about that

I have reverted the changes in the commit, kindly review.

…om/SamarthShukla17/cc-resource-archive into Created_scroll_back_to_Top" This reverts commit 58564a7, reversing changes made to 3d2e4fc.

…com/SamarthShukla17/cc-resource-archive into Created_scroll_back_to_Top" This reverts commit 99fdc08.

…/github.com/SamarthShukla17/cc-resource-archive into Created_scroll_back_to_Top"" This reverts commit b48429f.

possumbilities · 2024-04-17T13:19:56Z

@SamarthShukla17 It looks like you've reverted a number of changes in the repository and now there's 133 files showing as affected in some way.

possumbilities · 2024-04-22T16:50:38Z

@SamarthShukla17 Hi! are you intending to come back and clean up these last few commits? (if not, I'm going to close this PR)

possumbilities · 2024-05-01T16:06:50Z

@SamarthShukla17 pinging you here again, before I close this.

SamarthShukla17 · 2024-05-10T13:54:56Z

Hey, I am really sorry for not being able to respond and resolve the issue, I'll try my best to complete the required task.

possumbilities · 2024-09-17T13:06:43Z

Closing this and moving the area of focus to Vocabulary.

[Feature] Add a scroll-to-top element to UX for longer page contexts vocabulary#54

Created_Scroll_back_to_top

639681b

Created a scroll back to top button.

SamarthShukla17 requested a review from a team as a code owner March 15, 2024 06:46

SamarthShukla17 requested review from TimidRobot and annatuma and removed request for a team March 15, 2024 06:46

SamarthShukla17 mentioned this pull request Mar 15, 2024

[Feature] Add a scroll back to top button #168

Open

1 task

This comment was marked as outdated.

Sign in to view

SamarthShukla17 marked this pull request as draft March 16, 2024 03:33

Created a scroll back to top button

1325ec1

I have created a scroll back to top button and an additional js for the same has been created.

Updated previous PR

3009709

Made the code more efficient.

SamarthShukla17 marked this pull request as ready for review March 16, 2024 04:44

SamarthShukla17 marked this pull request as draft March 19, 2024 10:43

Updated_stt

d80f047

Updated the JS code for the scroll to top to make it more effective.

SamarthShukla17 marked this pull request as ready for review March 19, 2024 10:45

possumbilities requested review from possumbilities and removed request for TimidRobot and annatuma March 20, 2024 19:21

possumbilities reviewed Mar 20, 2024

View reviewed changes

docs/index.html Outdated Show resolved Hide resolved

possumbilities reviewed Mar 20, 2024

View reviewed changes

docs/index.html Outdated Show resolved Hide resolved

possumbilities mentioned this pull request Mar 22, 2024

Added go to top button #221

Closed

7 tasks

SamarthShukla17 marked this pull request as draft March 26, 2024 11:12

SamarthShukla17 added 2 commits March 26, 2024 16:44

Refactored_scroll_code

6183c86

Created a separate JS file for the scroll behavior.

Update index.html

fcbeefa

SamarthShukla17 marked this pull request as ready for review March 26, 2024 11:16

TimidRobot changed the title ~~Created_Scroll_back_to_top~~ Create a scroll back to top button Apr 8, 2024

TimidRobot reviewed Apr 8, 2024

View reviewed changes

docs/scroll.js Outdated Show resolved Hide resolved

docs/style.css Outdated Show resolved Hide resolved

docs/style.css Outdated Show resolved Hide resolved

Created end of the files

1022f46

Added the required end of the files and also fixed the document indentation of css file.

TimidRobot requested a review from possumbilities April 8, 2024 18:30

SamarthShukla17 requested a review from TimidRobot April 11, 2024 21:45

Merge branch 'main' into Created_scroll_back_to_Top

f5a9d44

possumbilities reviewed Apr 15, 2024

View reviewed changes

SamarthShukla17 added 2 commits April 16, 2024 12:44

Final Changes

3d2e4fc

Removed id tag, as only class will do the work, changed the class name and replaced getElementById with querySelector.

Merge branch 'Created_scroll_back_to_Top' of https://github.com/Samar…

58564a7

…thShukla17/cc-resource-archive into Created_scroll_back_to_Top

SamarthShukla17 requested a review from possumbilities April 16, 2024 07:21

possumbilities reviewed Apr 16, 2024

View reviewed changes

SamarthShukla17 added 3 commits April 17, 2024 06:32

Revert "Merge branch 'Created_scroll_back_to_Top' of https://github.c…

99fdc08

…om/SamarthShukla17/cc-resource-archive into Created_scroll_back_to_Top" This reverts commit 58564a7, reversing changes made to 3d2e4fc.

Reapply "Merge branch 'Created_scroll_back_to_Top' of https://github.…

b48429f

…com/SamarthShukla17/cc-resource-archive into Created_scroll_back_to_Top" This reverts commit 99fdc08.

Revert "Reapply "Merge branch 'Created_scroll_back_to_Top' of https:/…

2113b7e

…/github.com/SamarthShukla17/cc-resource-archive into Created_scroll_back_to_Top"" This reverts commit b48429f.

SamarthShukla17 requested a review from possumbilities April 17, 2024 01:06

possumbilities mentioned this pull request Sep 17, 2024

[Feature] Add a scroll-to-top element to UX for longer page contexts creativecommons/vocabulary#54

Open

1 task

possumbilities closed this Sep 17, 2024

possumbilities added the ⛔️ status: discarded Will not be worked on label Sep 17, 2024

possumbilities assigned possumbilities and Murdock9803 Sep 17, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create a scroll back to top button #216

Create a scroll back to top button #216

SamarthShukla17 commented Mar 15, 2024 •

edited by TimidRobot

Loading

possumbilities commented Mar 15, 2024

This comment was marked as outdated.

SamarthShukla17 commented Mar 16, 2024

SamarthShukla17 commented Mar 16, 2024

SamarthShukla17 commented Mar 19, 2024

SamarthShukla17 commented Mar 26, 2024

TimidRobot commented Apr 12, 2024

SamarthShukla17 commented Apr 15, 2024

possumbilities Apr 15, 2024 •

edited

Loading

SamarthShukla17 Apr 16, 2024

possumbilities Apr 15, 2024 •

edited

Loading

SamarthShukla17 Apr 16, 2024

possumbilities commented Apr 15, 2024

SamarthShukla17 commented Apr 16, 2024

possumbilities Apr 16, 2024

SamarthShukla17 Apr 16, 2024

SamarthShukla17 Apr 17, 2024

possumbilities commented Apr 17, 2024

possumbilities commented Apr 22, 2024

possumbilities commented May 1, 2024

SamarthShukla17 commented May 10, 2024

possumbilities commented Sep 17, 2024

		@@ -0,0 +1,11 @@
		document.addEventListener("DOMContentLoaded", function() {
		let stt = document.getElementById("stt");


		<h2 style="text-align: center; "><a href="/all">See all</a></h2>

		<a href="#the-top" class="stt" id="stt" title="scroll to top">Back To Top</a>

Create a scroll back to top button #216

Create a scroll back to top button #216

Conversation

SamarthShukla17 commented Mar 15, 2024 • edited by TimidRobot Loading

Fixes

Description

Screenshots

Checklist

Developer Certificate of Origin

possumbilities commented Mar 15, 2024

This comment was marked as outdated.

SamarthShukla17 commented Mar 16, 2024

SamarthShukla17 commented Mar 16, 2024

SamarthShukla17 commented Mar 19, 2024

SamarthShukla17 commented Mar 26, 2024

TimidRobot commented Apr 12, 2024

SamarthShukla17 commented Apr 15, 2024

possumbilities Apr 15, 2024 • edited Loading

Choose a reason for hiding this comment

SamarthShukla17 Apr 16, 2024

Choose a reason for hiding this comment

possumbilities Apr 15, 2024 • edited Loading

Choose a reason for hiding this comment

SamarthShukla17 Apr 16, 2024

Choose a reason for hiding this comment

possumbilities commented Apr 15, 2024

SamarthShukla17 commented Apr 16, 2024

possumbilities Apr 16, 2024

Choose a reason for hiding this comment

SamarthShukla17 Apr 16, 2024

Choose a reason for hiding this comment

SamarthShukla17 Apr 17, 2024

Choose a reason for hiding this comment

possumbilities commented Apr 17, 2024

possumbilities commented Apr 22, 2024

possumbilities commented May 1, 2024

SamarthShukla17 commented May 10, 2024

possumbilities commented Sep 17, 2024

SamarthShukla17 commented Mar 15, 2024 •

edited by TimidRobot

Loading

possumbilities Apr 15, 2024 •

edited

Loading

possumbilities Apr 15, 2024 •

edited

Loading