Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Include a back-to-top Button on scrolling down #346

Closed
rbhatia46 opened this issue Sep 28, 2018 · 7 comments
Closed

Include a back-to-top Button on scrolling down #346

rbhatia46 opened this issue Sep 28, 2018 · 7 comments
Labels
coding Issue related to code gci-candidate Issue being considered for gci medium

Comments

@rbhatia46
Copy link
Member

We are preparing to participate in Google Code-in, and have reserved this issue for participants in GCI - but we'd love to have your help with another one! Please check out https://code.publiclab.org to see more.

First Timers Only

Hi, this is a first-timers-only issue. This means this has been worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

The Problem

We want to include a button at the bottom-right corner of the screen in the main UI when we scroll the page to make it easy to go back to top with a smooth scrolling effect, which is currently missing and can be implemented as shown below.

scrolleffect

The Solution

We want to layout the button using an tag in HTML, along with font-awesome, then style it using CSS and finally write a few lines of jQuery to make the scrolling part work.

A seperate JavaScript file can be made for this functionality under examples/lib/scrollToTop.js, containing the necessary JavaScript code.

The HTML can be included in the examples/index.html and the CSS in examples/demo.css.

Make sure to include the JavaScript file in the <script> tag before the body ends and the button in the HTML markup above that.

Instance Count = 1

@rbhatia46 rbhatia46 added first-timers-only gci-candidate Issue being considered for gci coding Issue related to code medium labels Sep 28, 2018
@gitmate gitmate bot added the help wanted label Sep 28, 2018
@gitmate
Copy link

gitmate bot commented Sep 28, 2018

GitMate.io thinks the contributors most likely able to help are @tech4GT, and @GitMate[bot].

Possibly related issues are #260 (Blur module producing a black 'border' at the top and bottom), #231 ("Save as module" button on Dynamic module), #36 (What Should Module Logs Include?), and #318 (Delete buttons and indices slightly off in demo).

1 similar comment
@gitmate
Copy link

gitmate bot commented Sep 28, 2018

GitMate.io thinks the contributors most likely able to help are @tech4GT, and @GitMate[bot].

Possibly related issues are #260 (Blur module producing a black 'border' at the top and bottom), #231 ("Save as module" button on Dynamic module), #36 (What Should Module Logs Include?), and #318 (Delete buttons and indices slightly off in demo).

@jywarren
Copy link
Member

jywarren commented Sep 29, 2018 via email

@tech4GT
Copy link
Member

tech4GT commented Sep 29, 2018

Very nice idea indeed!!

@SidharthBansal
Copy link
Member

Published on GCI dashboard

@alfen-yu
Copy link

How do I claim this issue??? or open it with Desktop Github?

@SidharthBansal
Copy link
Member

For claiming the task just write a comment asking to claim it

For reproducing the task you need to install the software first

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
coding Issue related to code gci-candidate Issue being considered for gci medium
Projects
None yet
Development

No branches or pull requests

5 participants