Template:Scroll
From 2013.igem.org
(Difference between revisions)
(6 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<head> | <head> | ||
- | < | + | <style type="text/css"> |
- | + | #scrollUp { | |
- | + | ||
- | + | ||
- | + | ||
bottom: 20px; | bottom: 20px; | ||
right: 20px; | right: 20px; | ||
- | + | height: 38px; /* Height of image */ | |
+ | width: 38px; /* Width of image */ | ||
+ | background: url(https://static.igem.org/mediawiki/2013/8/87/Top.png) no-repeat; | ||
+ | } | ||
</style> | </style> | ||
+ | <script src="http://markgoodyear.com/labs/scrollup/js/lib/jquery-1.9.1.min.js"></script> | ||
+ | <script src="http://markgoodyear.com/labs/scrollup/js/jquery.scrollUp.min.js"></script> | ||
+ | </head> | ||
<script> | <script> | ||
Line 23: | Line 26: | ||
scrollDistance: 300, // Distance from top/bottom before showing element (px) | scrollDistance: 300, // Distance from top/bottom before showing element (px) | ||
scrollFrom: 'top', // 'top' or 'bottom' | scrollFrom: 'top', // 'top' or 'bottom' | ||
- | scrollSpeed: | + | scrollSpeed: 300, // Speed back to top (ms) |
- | easingType: ' | + | easingType: 'linear', // Scroll to top easing (see http://easings.net/) |
- | animation: ' | + | animation: 'fade', // Fade, slide, none |
animationInSpeed: 200, // Animation in speed (ms) | animationInSpeed: 200, // Animation in speed (ms) | ||
animationOutSpeed: 200, // Animation out speed (ms) | animationOutSpeed: 200, // Animation out speed (ms) | ||
- | scrollText: ' | + | scrollText: 'top', // Text for element, can contain HTML |
- | scrollTitle: | + | scrollTitle: false, // Set a custom <a> title if required. Defaults to scrollText |
- | activeOverlay: | + | scrollImg: true, // Set true to use image |
- | zIndex: | + | activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF' |
+ | zIndex: 2147483647 // Z-Index for the overlay | ||
}); | }); | ||
}); | }); | ||
- | |||
- | |||
- | </ | + | // Destroy example |
+ | $(function(){ | ||
+ | $('.destroy').click(function(){ | ||
+ | $.scrollUp.destroy(); | ||
+ | }) | ||
+ | }); | ||
+ | |||
+ | </script> | ||
</html> | </html> |
Latest revision as of 03:32, 27 August 2013