markgoodyear / scrollup Goto Github PK
View Code? Open in Web Editor NEWHome Page: http://markgoodyear.com/labs/scrollup/
Home Page: http://markgoodyear.com/labs/scrollup/
More than 50% of the time when using Mobile Safari (on my iPhone 5 or the iOS Simulator (both iOS7)) when I tap on the #scrollUp link, the page does not immediately scroll up but the address bar and bottom button bar pop back in to view (if they were hidden due to scrolling down the page). If I tap the #scrollUp link again once the address bar and bottom button bar are visible (or after scrolling back up a little manually to have them reappear), it will properly scroll to the top.
Reproducible on http://markgoodyear.com/labs/scrollup/?theme=image.
As I understand it it's currently not possible to tell the plugin to show the button/link when the user is X pixels away from the bottom. When using pages with varying height it would be quite convenient to show the link when the user reaches the bottom rather than at an arbitrary stage while scrolling down the page.
So, in short, a bottomDistance option would be useful :)
The package.json
says MIT License. If that's accurate, should we add a LICENSE
file, and add a license key to bower.json
, and possibly add a note to the README.md
as well?
i fail dot com
Hello,
is it possible to insert Scrollup repository into the Yarn package manager?
Thank you
When adding to a project in Codekit via Bower, none of the demo files are downloaded. Have to go to the Github page and download separately.
Hello! I've set the scrollSpeed from 300ms to 100ms and cannot see any difference. I also tried using values like 5000ms or even 50ms but my changes did not apply.
Is there any kind of speed limit? Thanks!
Add setting to make it so the scroll up button is restricted to a certain width, as on larger screens it could be far away from the content.
Status: In progress.
Hi, I love this project!
Could you help figure out how to kill the title on mouse hover?
Thanks!
so this works with plugins like iScroll js
Hello,
I'm using your plugin and it's fantastic. However, I miss an important feature for me: the ability to use custom animations for showing/hiding the button. I see in the README that the animation
option has three possible values: none
, fade
and slide
. It would be really cool if user could set any animation he wants, or maybe have an option that adds a class when the button is showed so that I can use the CSS3 transitions directly from the style.
Does this plugin even work? I copy everything and I only see in console:
Uncaught ReferenceError: scrollEvent is not defined
Hi,
i try to find out how to setup your script that i can scroll to an div element wich hast an offset from 800 pixel from the top.
whatever i do, it scrolls to the very top.
It can be great to have data-api support... What do you think?
I noticed today when testing my site in Firefox, that the Tab style moves over when you hover on it. Kinda weird... I tried adding !important after the left:30px, but no luck. Your demo does it too.
After you scroll back up, as its sliding back down it moves back to the left to the correct position. If you look at it in FF, you'll see what I'm talking about.
Thanks a lot, love your plugin!
I think there's a naming conflict with someone else parking at https://www.npmjs.com/package/scrollup
please
the position right tab change on :hover event, the tab do strange behavior
bower scrollup#~2.4.1 extract archive.tar.gz
bower scrollup#~2.4.1 invalid-meta for:/tmp/btervu/bower/b7edba58292def766c17063714a66af5-14031-esg8sh/bower.json
bower scrollup#~2.4.1 invalid-meta The "main" field cannot contain minified files
bower scrollup#~2.4.1 resolved https://github.com/markgoodyear/scrollup.git#2.4.1
Could you fix it?
it can replace scrollText with image?
Clickable area is restricted as dipicted on the screen shot http://joxi.ru/EA4jJ71UevVBmb. I.e. there's some padding on the left. You can try it out here https://azan.kz/maktabah.
that is arial-labels="scroll up"
Hi, I am using scrollup and it was working fine with some sliders (bx slider, or owl slider). However when I try to use responsiveslides.js or unslider, they do not work when srollup.js is included. When I remove the line of code that includes the scrollup.js, the sliders are working properly. Would be nice if you could have a look on it and tell me how to make it work.
Hi, if I choose animation as "slide" then have bug. Check plz
I'm looking to have the "Scroll to Top" button active until I get to around 3/4 way down the page, is this possible? I'm not sure how I can achieve this...
No inspect element errors in chrome, did all as instructed yet it doesn't show when I scroll down.
I'm talking about both having tried the Minimum setup and Example with default options
combined with the Fully Customisable CSS and demo CSS.
So what did I do wrong? Do we need html element Id present?
Custom class would allow for the use of different images/colors depending on context (ie, if user switches language). Also would be appreciated to have the inline styles removed and applied as a class or through the jQuery so that they could be overwritten with CSS.
Thanks for the excellent plugin.
Does scrollup really have a fixed dependency on jQuery 1.10.2? I've installed scrollup via bower and am using jQuery ~2.1.1 on the project and bower is forcing us to choose between meeting the scrollup dependency, and our desire to use a later version of jQuery. Are we missing something? Or is there any chance you could semver this to a higher version of jQuery?
I need to get the user to scroll to an element sitting mid-page. From README It doesn't look like scrollup is prepared for this yet?
ScrollEvent needs a var
line 106:
scrollEvent = $(window).scroll(function () {
Please consider losing the focus after a click event as it may cause visual differences.
Doesn't seem to be working if installed via NPM and using jQuery 3. Any thoughts on a possible fix? I know .unbind()
has been deprecated but changing it to .off()
didn't fix it.
Thanks!
Danny
The most missing feature is the possibility to use existing HTML elements as "Scroll Up" buttons. In the current version scrollUp isn't accessible.
Is it possible to, or how can I, initiate 2 instances? I need one at the bottom right for "Back to Top" and one at the top right for "Contact Us".
Thoughts?
In Firefox the focus border with opacity is ugly, this should be removed by default in all css, I used this
to remove it:
outline: 0;
First, I'd say nice plugin.
Second, my suggestion/feature request is to add option for auto hide after time out from stopping to scroll so user can see the content without anything behind transparent element, then auto show if user touches or mouse event..
Third, I'd also suggest adding a fourth demo for "Circle" besides the Pill demo.
Thanks
Hi,
I'm currently using font awesome icons in my project and i would like to use one of these icons as image for scrollUp (instead of using fixed width/height image inside background url), like this :
$.scrollUp({
scrollText: '<i class="icon-chevron-sign-up icon-2x"></i>'
});
or:
$.scrollUp({
scrollText: ''
});
but scrollUp uses .text()
to add title. Could it be possible to have a way to add more than simple text inside scrollUp content ? By replacing .text()
with .html()
or adding another option ?
Currently my request is a bit specific with another lib, but I suppose that inserting more than simple text could be a more larger need for someone else.
And thanks for your great work !
According to the website, add the the code below should work, but sadly it's not.
<script src="assets/js/jquery.scrollUp.min.js"></script>
<script>
$(function () {
$.scrollUp({
scrollName: 'scrollUp', // Element ID
topDistance: '300', // Distance from top before showing element (px)
topSpeed: 300, // Speed back to top (ms)
animation: 'fade', // Fade, slide, none
animationInSpeed: 200, // Animation in speed (ms)
animationOutSpeed: 200, // Animation out speed (ms)
scrollText: 'Scroll to top', // Text for element
activeOverlay: '#00FFFF', // Set CSS color to display scrollUp active point, e.g '#00FFFF'
});
});
</script>
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.