ScrollUp

一个 jQuery 插件,用于创建一个可定制的 "滚动到顶部 "功能,适用于任何网站。「A jQuery plugin to create a customisable 'Scroll to top' feature that will work with any website」

Github星跟蹤圖

ScrollUp Build Status devDependency Status

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.

主要指標

概覽
名稱與所有者markgoodyear/scrollup
主編程語言JavaScript
編程語言CSS (語言數: 3)
平台
許可證
所有者活动
創建於2013-01-22 21:30:48
推送於2022-02-06 14:53:46
最后一次提交2015-03-30 08:50:00
發布數12
最新版本名稱v2.4.1 (發布於 )
第一版名稱v2.1.0 (發布於 )
用户参与
星數1k
關注者數57
派生數291
提交數67
已啟用問題?
問題數40
打開的問題數15
拉請求數7
打開的拉請求數8
關閉的拉請求數8
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?