vfeskov / vanilla-back-to-top Goto Github PK

Simple and smooth Back To Top button

License: MIT License

JavaScript 97.43% Shell 2.57%

vanilla scroll back-top pure zero-dependency react angular vue configurable static-site-generator

vanilla-back-to-top's Introduction

Vanilla Back To Top

Simple and tiny Back To Top button with no dependencies. Hides when on top, scrolls up smoothly when clicked. Works equally great with Vue, React, Angular and without frameworks on Jekyll, Hugo and Hexo

Live demo

Features

Hides when on top
Scrolls up smoothly when clicked
Up-to-date Material-like user experience
Compatible with really old browsers
No dependencies or requirements
Works great with Vue, React, Angular and other frameworks, see INSTALL
Works great on static websites with Jekyll, Hugo, Hexo and others

How to use

Add this to <body> of your HTML:

<script src="https://unpkg.com/[email protected]/dist/vanilla-back-to-top.min.js"></script>
<script>addBackToTop({
  diameter: 56,
  backgroundColor: 'rgb(255, 82, 82)',
  textColor: '#fff'
})</script>

For alternative installation see INSTALL

See EXAMPLES

For all options see OPTIONS

License

MIT, see LICENSE

Default icon from Material Design Icons under Apache License 2.0, which only restricts re-selling the icon

Support me with a star ♥

vanilla-back-to-top's People

Contributors

Stargazers

Watchers

vanilla-back-to-top's Issues

Not accessible: No option to change the focus to element at top of page, no way to keyboard select the div

The problem

I'm working on a website that requires keyboard navigation and screen reader compatibility. The site must be accessible. But there are a few things I've found that I don't know if vanilla-back-to-top supports yet... or at least I couldn't find explanations of how to deal with yet.

Focus doesn't change: There's currently no way to choose and id or other element to change the focus to when clicking on the back to top button. That means that focus remains at the bottom of the page so when a user hits tab the next thing focus goes to is likely the tabs on your browser instead of the top of the webpage somewhere like a keyboard navigation user would expect. Here's one example, not a good one but at least an example.
Can't trigger with keyboard: I haven't found a way to select the back to top button with a keyboard yet. This is usually done with the enter or spacebar key.

My code

Here's the code I'm currently using to initialize this. Note I added aria-labelledby so screen readers will announce the text in title.

    addBackToTop({
        backgroundColor: 'rgba(101, 105, 80, 1)',
        cornerOffset: '15', // px
        diameter: '45', // px
        innerHTML: `
                    <div aria-labelledby="back-to-top-title" role="link" tabindex="0">
                        <svg viewBox="0 0 24 24">
                            <title id="back-to-top-title">Scroll to top of page</title>
                            <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
                        </svg>
                    </div>
                    `,
        textColor: '#fff'
    });

ease is not a function

Hi there,

Installed your script via npm and am using it with Vue.. works great!

Trying to customize the options and noticed two things. First of all in your "options" page you use equal signs instead of semi-colons

Secondly, two of the options don't seem to work.. ease and size

the "defaults" for those are "inOutSine" and "diameter". If I put those in quotes, single or double, it just doesn't work. I get "ease is not a function"

And if I put them without quotes I get "inOutSine" and "diameter" is not defined

I suppose you could store a function within a variable and pass that as the ease function, but I don't think this is what you intended? You should be able to just pass it the name of the easing from https://www.npmjs.com/package/ease-component as you write? Could you explain how that works please?

Thanks!

Typescript support?

Really handy lib, but didn't find @types to use with TS. Only to set module declaration myself?

Is there a way to limit the size of the button when you zoom a page?

The button looks nice when the page is in 100% zoom. But when you start to increase the zoom level, the button becomes really large. Is there a way to limit the size of the button somehow, so it would stay the same no matter what zoom you use?

feature request:transition direction

transition direction from right to left，not onlly from bottom to top.

it does not work

i'm using a hugo site, after adding ur install code to in layouts HTML,nothing happened, i've no idea what's wrong, here's one of my page url,It would be nice if check it.thank a lot

it only scrolls to vertical top but not to horizontal left - esp on mobile screens

Basically when the page is large to mobile screen, we need a float button to easily scroll to top and also to left. At least this could be an option.

Thanks!

cornerOffset X or Y?

It would be nice, if we could positioning the back-to-top button only on x-axis or y-axis. Thanks.

Scroll to specific div

Hi, thanks for creating this!

I saw that the description states:

"Simple and tiny Back To Top button with no dependencies, for whole window or specific(s) div(s)."
I'm hoping to scroll back to a div tag named "#contents".

Can you please let me know how to scroll back to a particular div (which happens to be further down the page), as opposed to a set number of pixels from the top.

Thank you

Script does not work.

How to fix this?

Scroll top moves button in mobile devices

Hey there reporting a bug that seems to happen only in real mobile devices. The steps to replicate are the following:

Scroll down a bit on the viewport
Scroll top a bit on the viewport
You'll notice that the button is not entirely visible as you can see in the picture below.

This issue can be replicated accessing https://goodguydaniel.com/jekyll/update/2018/08/12/about-js-conf-eu-berlin-2018.html.

Cool component btw. Thanks.