[RESOLVED] Code to create effects & carrot/icon Go to bottom by portion by portion &top

Friends, I am trying to mimic the About gmail Google page in my project, as it seems to be the reference now.

(a) The icon effect visible at complete bottom and (b) scrolling bottom step by step effect for each click (c) The bumping upwords effect of icon/carrot when we load/refresh the page is really nice and I would like to do something similar. Here is the page that I am referring. https://www.google.com/gmail/about/

Wondering how to create Go to bottom and top effect with dynamic scroll icon which automatically changes its arrow direction (up/down) in icon when we scroll to complete bottom… Similar to the icon/carrot (available in extreme right bottom) in following page: https://www.google.com/gmail/about/ When we click on the icon again & again, the page is scrolling to bottom portion by portion (portion of page) and when we are scrolled to the complete bottom (after 7 clicks), the direction of arrow in the icon is changing to upwards and when we click on it the page is scrolling/going to top and the direction of arrow in the icon is changing to downwards . Pls help with the exact code to have similar effects (bumping,arrow direction change at bottom and top, portion by portion scroll) and dynamic icon. Thank you.

Hi there vpkhihuk,

and a warm welcome to these forums. :winky:

“JavaScript” is not my forté, but check out
the attachment to see a reasonable attempt
at the scrolling effect. :sunglasses:

vpkhihuk.zip (3.7 KB)

coothead

1 Like

Wow coothead, Thank you somuch. You are already an expert the Gem. Thats really nice of you I am almost a beginner seeking your help. You are almost there,it is almost giving effect of about google gmail page. But just lacked bumping effect and the arrow in icon with only one bug as listed below. I think you may get ideas to resolve if you visit following code in first link in point 1.Could you please revisit the code to fix . Thanks again…

  1. Bumping Effect: Bumping of entire icon (coming from bottom) once we load the page.I have found couple of codes here on bumping for your consideration to revisit the code to implement if possible
    https://codepen.io/anon/pen/epMoxB
    http://jsfiddle.net/flowstoneknight/ybq0h6o4/1/

  2. Arrow in the icon is looking like a “Y” instead of “v”/downward symbol. Lets use the symbol from the first link in the point 1 above.

  3. Bug: When the icon/carrot is at complete bottom(after 7clicks), when we double click instead of single click the page is getting struck at the complete bottom its not even allowing to scroll up manually(scrollbar is mot moving up) as well

check out version 2 which addresses some of the issues raised. :winky:

The “ondblclick” problem was…er rather problematic. :wonky:

vpkhihuk-version-2.zip (7.9 KB)

coothead

1 Like

Bravo, Thats brilliant Mr coothead. Thank you somuch. You are the man. Now it is almost working in similar fashion of about gmail page. Bounce is appearing only once in About gmail page when we load or refresh.But our code is making it to bounce at every section/scrol!! Thats not a problem at all as it has beaten the purpose.You made my day coothead. I would like to mark this thread as RESOLVED, but am not seeing that option here.Thanks again, Have a great day, cheers!

You could point this out to a moderator and hope
that he/she will close the thread for you. :winky:

@TechnoBear, @ronpat and @SamA74 come
immediately to mind, if you are looking for one. :sunglasses:

coothead

1 Like

We don’t close threads as a rule. Somebody else might have a similar issue, or have a relevant point to add.

Threads are set to close automatically three months after the last post.

As you’ve discovered, there is no facility in Discourse for marking a thread “solved”.

Is it possible for an O.P. or a moderator to edit
the thread title, and add “[ Resolved ]” to it ?

coothead

1 Like

All done :slight_smile: .

2 Likes

Dear Moderators, It would be nice to give the users an option to indicate RESOLVED.Its a kind recognition to the user who solved. By the way threads with RESOLVED mark may attarct more visitors than open/pending threads.
It would be even good if you provide RESOLVE or APPRECIATE button directly connected to the user prfile’s finacial account as any amount of token of appreciation.Its just my suggestion.Pls ignore if it leads to any cultural/any issues.

Dear coothead, Continuous bouncing is drawing the focus/attention of reader it seems, thats fine, but it is continuously(it’s continuous bouncing) distracting the reading focus.Lets use “slideInUp” animation instead of bouncing effect.
One of the following animation effects for your ideas “slideInUp” or “slideOutUp”. Animation previews in following URL: http://www.theappguruz.com/tag-tools/web/CSSAnimations/
Could you please revisit the code if possible to fix this as final.Thanks again!

I’m confused. Is this topic “resolved” or isn’t it?

There are Likes for that - the heart icon

1 Like

As explained already, there is no facility to do that in Discourse, the software on which this forum runs.

Adding [Resolved] to a topic may be done manually, but in general, we don’t do that either. Partly that’s because it would make extra work for moderators, and partly it’s because other issues may come up - as seems to be the case here - meaning the discussion is not, in fact, finished. Seeing [Resolved] on the topic is confusing in this case. It may also lead others who might be able to help to simply ignore the topic, in the mistaken belief that no further help is required.

Hi there vpkhihuk,

I just coded the “bouncing” effect according
to the example that you provided here…

CSS arrow down bouncing
A Pen By Captain Anonymous

If you want the effect to only work “onload” and
“refresh”, then open the CSS file, go to line #24
and remove infinite from here…

    animation: bounce 3s infinite;

Whilst there you could edit the display time - ( 3s ).

As your confidence increases, you could even go
down to lines #89 and #95 and play with the
bounce heights…

    transform: translateY(-1em);

and

    transform: translateY(-0.5em);

…if they do not quite suit your requirements. :winky:

coothead

1 Like

Thanks Mittneague . It was already resolved by coothead.It was my bad. Its just extra/additional stuff to polish.I was just giving input/suggestion if that kind of appreciation is possible.I started using heart button then!

1 Like

Agreed.Got it TechnoBear. Thank you. It was already resolved by coothead. It was my bad. Its just extra/additional stuff to polish.I was just giving input/suggestion if that kind of appreciation is possible.I started using heart button then!

1 Like

Thanks again Coothead. Works like a charm. You are the man on mission(to help other humanbeings) coothead. Have a great day to you and moderator folks!

1 Like

That’s not actually true. :rolleyes:

I do not really have any altruistic tendencies. :unhappy:

My raison d’être is problem solving, which keeps
my little grey cells active and, hopefully, may also
prevent the onslaught of senile dementia. :shifty:

Of course, if my little efforts are beneficial to others
then I would consider that to be a minor bonus. :winky:

coothead

3 Likes

Hi there vpkhihuk,

I forgot to mention that the scrolling effect
is not fixed to 7 clicks or sections. :unhappy:

You may have as many as you like. :winky:

coothead

1 Like

I wish your grey cells more & more active and healthy.I would also advise you to play more chess games as well which needs problem solving on several occasions in a single game. Am an international chess player as well.Wishing you a good health coothead. The guy in following video talks more on human cells and their reaction and overall health related topics. I request you to visit in your free time, may be of use. Bye for now coothead. Thanks again!

Hi there vpkhihuk,

I have made the script more robust with
respect to multiple clicking of the button.

And improvements have been made with
regard to smaller screen use, as the
scrolling seemed to take for ever. :wonky:

Check out the attachment. :winky:

button-scroll-down-and-up.zip (8.3 KB)

coothead

1 Like