vfeskov / vanilla-back-to-top Goto Github PK
View Code? Open in Web Editor NEWSimple and smooth Back To Top button
License: MIT License
Simple and smooth Back To Top button
License: MIT License
transition direction from right to left,not onlly from bottom to top.
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
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!
Hey there reporting a bug that seems to happen only in real mobile devices. The steps to replicate are the following:
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.
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?
Really handy lib, but didn't find @types to use with TS. Only to set module declaration myself?
It would be nice, if we could positioning the back-to-top button only on x-axis or y-axis. Thanks.
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!
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.
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.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'
});
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.