first commit
This commit is contained in:
12
public/assets/js/scrollUp/css/image.css
Normal file
12
public/assets/js/scrollUp/css/image.css
Normal file
@ -0,0 +1,12 @@
|
||||
/* Image style */
|
||||
#scrollUp {
|
||||
background-image: url("../top.png");
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 38px; /* Width of image */
|
||||
height: 38px; /* Height of image */
|
||||
white-space: nowrap;
|
||||
text-indent: 100%;
|
||||
overflow: hidden;
|
||||
*text-indent: -9999px;
|
||||
}
|
5
public/assets/js/scrollUp/css/link.css
Normal file
5
public/assets/js/scrollUp/css/link.css
Normal file
@ -0,0 +1,5 @@
|
||||
/* Text link style */
|
||||
#scrollUp {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
24
public/assets/js/scrollUp/css/pill.css
Normal file
24
public/assets/js/scrollUp/css/pill.css
Normal file
@ -0,0 +1,24 @@
|
||||
/* Pill style */
|
||||
#scrollUp {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-family: sans-serif;
|
||||
text-decoration: none;
|
||||
opacity: .9;
|
||||
padding: 10px 20px;
|
||||
-webkit-border-radius: 16px;
|
||||
-moz-border-radius: 16px;
|
||||
border-radius: 16px;
|
||||
-webkit-transition: background 200ms linear;
|
||||
-moz-transition: background 200ms linear;
|
||||
-o-transition: background 200ms linear;
|
||||
transition: background 200ms linear;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
#scrollUp:hover {
|
||||
background-color: #000;
|
||||
}
|
32
public/assets/js/scrollUp/css/tab.css
Normal file
32
public/assets/js/scrollUp/css/tab.css
Normal file
@ -0,0 +1,32 @@
|
||||
/* Tab style */
|
||||
#scrollUp {
|
||||
bottom: 0;
|
||||
right: 30px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: -10px;
|
||||
padding: 10px 5px;
|
||||
font: 14px/20px sans-serif;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
color: #828282;
|
||||
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
|
||||
background-color: #E6E6E6;
|
||||
background-image: -moz-linear-gradient(top, #EBEBEB, #DEDEDE);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#EBEBEB), to(#DEDEDE));
|
||||
background-image: -webkit-linear-gradient(top, #EBEBEB, #DEDEDE);
|
||||
background-image: -o-linear-gradient(top, #EBEBEB, #DEDEDE);
|
||||
background-image: linear-gradient(to bottom, #EBEBEB, #DEDEDE);
|
||||
background-repeat: repeat-x;
|
||||
-webkit-transition: margin-bottom 150ms linear;
|
||||
-moz-transition: margin-bottom 150ms linear;
|
||||
-o-transition: margin-bottom 150ms linear;
|
||||
transition: margin-bottom 150ms linear;
|
||||
}
|
||||
|
||||
#scrollUp:hover {
|
||||
margin-bottom: 0;
|
||||
}
|
162
public/assets/js/scrollUp/jquery.scrollUp.js
Normal file
162
public/assets/js/scrollUp/jquery.scrollUp.js
Normal file
@ -0,0 +1,162 @@
|
||||
(function ($, window, document) {
|
||||
'use strict';
|
||||
|
||||
// Main function
|
||||
$.fn.scrollUp = function (options) {
|
||||
|
||||
// Ensure that only one scrollUp exists
|
||||
if (!$.data(document.body, 'scrollUp')) {
|
||||
$.data(document.body, 'scrollUp', true);
|
||||
$.fn.scrollUp.init(options);
|
||||
}
|
||||
};
|
||||
|
||||
// Init
|
||||
$.fn.scrollUp.init = function (options) {
|
||||
|
||||
// Define vars
|
||||
var o = $.fn.scrollUp.settings = $.extend({}, $.fn.scrollUp.defaults, options),
|
||||
triggerVisible = false,
|
||||
animIn, animOut, animSpeed, scrollDis, scrollEvent, scrollTarget, $self;
|
||||
|
||||
// Create element
|
||||
if (o.scrollTrigger) {
|
||||
$self = $(o.scrollTrigger);
|
||||
} else {
|
||||
$self = $('<a/>', {
|
||||
id: o.scrollName,
|
||||
href: '#top'
|
||||
});
|
||||
}
|
||||
|
||||
// Set scrollTitle if there is one
|
||||
if (o.scrollTitle) {
|
||||
$self.attr('title', o.scrollTitle);
|
||||
}
|
||||
|
||||
$self.appendTo('body');
|
||||
|
||||
// If not using an image display text
|
||||
if (!(o.scrollImg || o.scrollTrigger)) {
|
||||
$self.html(o.scrollText);
|
||||
}
|
||||
|
||||
// Minimum CSS to make the magic happen
|
||||
$self.css({
|
||||
display: 'none',
|
||||
position: 'fixed',
|
||||
zIndex: o.zIndex
|
||||
});
|
||||
|
||||
// Active point overlay
|
||||
if (o.activeOverlay) {
|
||||
$('<div/>', {
|
||||
id: o.scrollName + '-active'
|
||||
}).css({
|
||||
position: 'absolute',
|
||||
'top': o.scrollDistance + 'px',
|
||||
width: '100%',
|
||||
borderTop: '1px dotted' + o.activeOverlay,
|
||||
zIndex: o.zIndex
|
||||
}).appendTo('body');
|
||||
}
|
||||
|
||||
// Switch animation type
|
||||
switch (o.animation) {
|
||||
case 'fade':
|
||||
animIn = 'fadeIn';
|
||||
animOut = 'fadeOut';
|
||||
animSpeed = o.animationSpeed;
|
||||
break;
|
||||
|
||||
case 'slide':
|
||||
animIn = 'slideDown';
|
||||
animOut = 'slideUp';
|
||||
animSpeed = o.animationSpeed;
|
||||
break;
|
||||
|
||||
default:
|
||||
animIn = 'show';
|
||||
animOut = 'hide';
|
||||
animSpeed = 0;
|
||||
}
|
||||
|
||||
// If from top or bottom
|
||||
if (o.scrollFrom === 'top') {
|
||||
scrollDis = o.scrollDistance;
|
||||
} else {
|
||||
scrollDis = $(document).height() - $(window).height() - o.scrollDistance;
|
||||
}
|
||||
|
||||
// Scroll function
|
||||
scrollEvent = $(window).scroll(function () {
|
||||
if ($(window).scrollTop() > scrollDis) {
|
||||
if (!triggerVisible) {
|
||||
$self[animIn](animSpeed);
|
||||
triggerVisible = true;
|
||||
}
|
||||
} else {
|
||||
if (triggerVisible) {
|
||||
$self[animOut](animSpeed);
|
||||
triggerVisible = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (o.scrollTarget) {
|
||||
if (typeof o.scrollTarget === 'number') {
|
||||
scrollTarget = o.scrollTarget;
|
||||
} else if (typeof o.scrollTarget === 'string') {
|
||||
scrollTarget = Math.floor($(o.scrollTarget).offset().top);
|
||||
}
|
||||
} else {
|
||||
scrollTarget = 0;
|
||||
}
|
||||
|
||||
// To the top
|
||||
$self.click(function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
$('html, body').animate({
|
||||
scrollTop: scrollTarget
|
||||
}, o.scrollSpeed, o.easingType);
|
||||
});
|
||||
};
|
||||
|
||||
// Defaults
|
||||
$.fn.scrollUp.defaults = {
|
||||
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 in 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: '', // Text for element, can contain HTML
|
||||
scrollTitle: '回頁面頂端', // Set a custom <a> title if required. Defaults to scrollText
|
||||
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
|
||||
};
|
||||
|
||||
// Destroy scrollUp plugin and clean all modifications to the DOM
|
||||
$.fn.scrollUp.destroy = function (scrollEvent) {
|
||||
$.removeData(document.body, 'scrollUp');
|
||||
$('#' + $.fn.scrollUp.settings.scrollName).remove();
|
||||
$('#' + $.fn.scrollUp.settings.scrollName + '-active').remove();
|
||||
|
||||
// If 1.7 or above use the new .off()
|
||||
if ($.fn.jquery.split('.')[1] >= 7) {
|
||||
$(window).off('scroll', scrollEvent);
|
||||
|
||||
// Else use the old .unbind()
|
||||
} else {
|
||||
$(window).unbind('scroll', scrollEvent);
|
||||
}
|
||||
};
|
||||
|
||||
$.scrollUp = $.fn.scrollUp;
|
||||
|
||||
})(jQuery, window, document);
|
BIN
public/assets/js/scrollUp/top.png
Normal file
BIN
public/assets/js/scrollUp/top.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 698 B |
Reference in New Issue
Block a user