markgoodyear / scrollup

ScrollUp

A jQuery plugin to create a customisable 'Scroll to top' feature that will work with any website

Installing with Bower

To install scrollUp with Bower:

bower install scrollup

How to use

Simply include the jquery.scrollUp.min.js file and place the following in the head of your document (make sure jQuery is included):

Minimum setup

$(function () {
    $.scrollUp();
});

Example with default options

$(function () {
    $.scrollUp({
        scrollName: 'scrollUp',      // Element ID
        scrollDistance: 300,         // Distance from top/bottom before showing element (px)
        scrollFrom: 'top',           // 'top' or 'bottom'
        scrollSpeed: 300,            // Speed back to top (ms)
        easingType: 'linear',        // Scroll to top easing (see http://easings.net/)
        animation: 'fade',           // Fade, slide, none
        animationSpeed: 200,         // Animation speed (ms)
        scrollTrigger: false,        // Set a custom triggering element. Can be an HTML string or jQuery object
        scrollTarget: false,         // Set a custom target element for scrolling to. Can be element or number
        scrollText: 'Scroll to top', // Text for element, can contain HTML
        scrollTitle: false,          // Set a custom <a> title if required.
        scrollImg: false,            // Set true to use image
        activeOverlay: false,        // Set CSS color to display scrollUp active point, e.g '#00FFFF'
        zIndex: 2147483647           // Z-Index for the overlay
    });
});

activeOverlay

To create a visible line to help determine an ideal scroll distance from the top, assign a valid CSS colour to the activeOverlay setting. This could be HEX, HSLA or RGB(A). Example: activeOverlay: '#00FFFF'. See the demo for an example.

scrollFrom

New feature in v2.0.0. Display the scrollUp element either the set distance from the top (default), or from the bottom of the page.

Destroy method

New feature in v2.0.0. If you need to destroy the instance of scrollUp, simple use the following to remove all modifications to the DOM:

$.scrollUp.destroy();

Fully Customizable

ScrollUp is fully customisable via CSS which makes it simple to fit right into your project. Simply target the scrollUp's generated ID in your CSS file and set your styles. Below is a basic style example:

#scrollUp {
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #555;
    color: #fff;
}

Use background image

To use a background image instead of text, simply set scrollImg: true. This will allow you to set a background image in your CSS file.

Contributing

Please see CONTRIBUTE.md for info on contributing.

Demo

Check out the demo for more style and feature examples.

scrollup's Issues

Remove focus border in FF

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;

License?

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?

Add an option to add discernible name

that is arial-labels="scroll up"

Remove @ Bottom

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...

add a tag

please

Adding from Bower doesn't download demo files

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.

Often takes two taps to trigger scrollUp on Mobile Safari

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.

'scrollText' option : add more than text (html content) ?

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 !

scrollEvent missing var

ScrollEvent needs a var

line 106:
scrollEvent = $(window).scroll(function () {

Clickable area is restricted

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.

data-api support

It can be great to have data-api support... What do you think?

Support custom animations

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.

Scroll to an div element

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.

Provide bottomDistance option

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 :)

Lose focus

Please consider losing the focus after a click event as it may cause visual differences.

Add max-width option

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.

It's not working

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>

Does this work?

Does this plugin even work? I copy everything and I only see in console:

Uncaught ReferenceError: scrollEvent is not defined

no problem at all

i fail dot com

stripes after scroll up and down

Hi everyone,

Thank you Mark for your work!
I have a little problem. Only in Safari this error is displayed while you scroll up and down. I took a picture of it and have attached it.

Thanks for your help.

it can replace scrollText with image?

it can replace scrollText with image?

scrollup crashing some sliders

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.

Add scrollTo parameter to specify scrolling target

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?

jQuery Dependency 1.10.2

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?

kill the title

Hi, I love this project!

Could you help figure out how to kill the title on mouse hover?

Thanks!

Add option for custom class on the anchor tag

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.

bug with jquery 1.11.0

Hi, if I choose animation as "slide" then have bug. Check plz

add option to support scrollable divs

so this works with plugins like iScroll js

I cannot see any difference in changes below 300ms (scrollSpeed)

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!

scrollup repository on Yarn

Hello,
is it possible to insert Scrollup repository into the Yarn package manager?

Thank you

ScrollUp Anchor Titles

Leave anchor title for ScrollUp as scrollText by default, but allow it to be changed in instances where anchor title and scrollText should be different, for instance when using ↑ symbol (↑) as scrollText a separate title is needed otherwise it reads as '↑'.

Auto hide and auto show after some time

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

Use existing elements as "Scroll Up" buttons

The most missing feature is the possibility to use existing HTML elements as "Scroll Up" buttons. In the current version scrollUp isn't accessible.

position tab change in :hover event at mozilla firefox

the position right tab change on :hover event, the tab do strange behavior

Uncaught TypeError: $.scrollUp is not a function with jQuery 3 and NPM

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

Can't get it to work sadly :(

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?

"npm install scrollup" installs something else

I think there's a naming conflict with someone else parking at https://www.npmjs.com/package/scrollup

Tab moves in Firefox

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!

bower data problem

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?

Multiple instances possible?

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?