adds ability to have scrollable back to top

[N6REJ]

Pull Request for Issue # .

Summary of Changes

Adds ability for "smart" back to top where...

1. back to top = on & scroll = off : button is in footer within container.
2. back to top = off & scroll ( doesn't matter ) : no button displayed
3. back to top = on & scroll = on : button moved out of container and scrolls with viewport.
   button is hidden until content is scrolled.

Testing Instructions

check that backtotop button works in footer and turns on/off
load pr
run npm ci
check that button states are as listed above.

Expected result

backend

desktop

iphone11

note8
![image](https://user-images.githubusercontent.com/1850089/94995659-49a02580-0565-11eb-8b15-000bed189603.jpg

Actual result

Documentation Changes Required

none

[brianteeman]

what is the difference between back to top and scroll to top?

[N6REJ]

guess I should include backend screen shot... back to top is stuck in footer

[brianteeman]

I meant what is the difference so that we need two

[N6REJ]

if they choose back-to-top its a sticky that is ONLY in the footer container. Never leaves footer.
if they choose "scroll" then it scrolls with page and is not part of the footer itself.

[brianteeman]

Thank you for the explanation - my 2c I would only offer one

[N6REJ]

Thank you for the explanation - my 2c I would only offer one

I agree but having a back-to-top that doesn't stay in the viewport is very non traditional and what they wanted as default state.

[N6REJ]

I wish I could hide when above the fold but w/o javascript thats not possible afaik

[brianteeman]

You can do it with just css https://moderncss.dev/pure-css-smooth-scroll-back-to-top/

[richard67]

Thank you for the explanation - my 2c I would only offer one

100% agree. It makes no sense to have both of them, and it may even confuse the user.

[brianteeman]

please fix the code style issues with the last commit

[N6REJ]

@brianteeman @richard67 thanks guys, idk how that stuff slipped past me.

[hans2103]

@N6REJ
Back-to-top Link = YES
Scroll-to-top = YES

When I scroll to the bottom of the page I see the following styling:

[hans2103]

@N6REJ I've tried to create a PR on yours, but failed. Therefor I have created a new PR #169

[N6REJ]

@hans2103 I'll just let you run with it then... You've changed it quite a bit.