├── .gitignore ├── .codeclimate.yml ├── .eslintrc.yml ├── bower.json ├── package.json ├── CHANGELOG.md ├── dist └── jquery.goup.min.js ├── README.md └── src └── jquery.goup.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | src/test.html 3 | .idea 4 | .DS_Store -------------------------------------------------------------------------------- /.codeclimate.yml: -------------------------------------------------------------------------------- 1 | engines: 2 | duplication: 3 | enabled: true 4 | config: 5 | languages: 6 | - javascript 7 | eslint: 8 | enabled: true 9 | fixme: 10 | enabled: true 11 | ratings: 12 | paths: 13 | - src/** 14 | exclude_paths: 15 | - dist/**/* 16 | -------------------------------------------------------------------------------- /.eslintrc.yml: -------------------------------------------------------------------------------- 1 | env: 2 | browser: true 3 | jquery: true 4 | extends: 'eslint:recommended' 5 | rules: 6 | indent: 7 | - error 8 | - 4 9 | - SwitchCase: 1 10 | linebreak-style: 11 | - error 12 | - unix 13 | quotes: 14 | - error 15 | - single 16 | semi: 17 | - error 18 | - always 19 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-goup", 3 | "version": "1.1.2", 4 | "homepage": "https://github.com/dnlnrs/jquery-goup", 5 | "description": "A simple jQuery plugin that let users go back to the top of a web page.", 6 | "main": "./src/jquery.goup.js", 7 | "keywords": [ 8 | "jquery-plugin", 9 | "scroll", 10 | "scrolltop", 11 | "backtotop", 12 | "scrolltotop" 13 | ], 14 | "licenses": [ 15 | { 16 | "type": "MIT", 17 | "url": "http://www.opensource.org/licenses/mit-license.php" 18 | }, 19 | { 20 | "type":"GPL", 21 | "url":"http://www.gnu.org/licenses/gpl.html" 22 | } 23 | ], 24 | "private": true, 25 | "ignore": [ 26 | "**/.*", 27 | "node_modules", 28 | "bower_components", 29 | "test", 30 | "tests" 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-goup", 3 | "version": "1.1.3", 4 | "description": "A simple jQuery plugin that let users go back to the top of a web page.", 5 | "homepage": "https://github.com/dnlnrs/jquery-goup", 6 | "author": "Daniele Lenares (https://github.com/dnlnrs)", 7 | "main": "src/jquery.goup.js", 8 | "scripts": { 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/dnlnrs/jquery-goup" 14 | }, 15 | "bugs": { 16 | "url": "https://github.com/dnlnrs/jquery-goup/issues" 17 | }, 18 | "keywords": [ 19 | "jquery-plugin", 20 | "scroll", 21 | "scrolltop", 22 | "backtotop", 23 | "scrolltotop" 24 | ], 25 | "browserDependencies": { 26 | "jquery": ">=1.5" 27 | }, 28 | "licenses": [ 29 | { 30 | "type": "MIT", 31 | "url": "http://www.opensource.org/licenses/mit-license.php" 32 | }, 33 | { 34 | "type": "GPL", 35 | "url": "http://www.gnu.org/licenses/gpl.html" 36 | } 37 | ], 38 | "devDependencies": { 39 | "eslint": "^4.5.0", 40 | "eslint-plugin-import": "^2.7.0" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### Changelog 2 | 3 | #### v1.1.3 (08-31-2017) 4 | * Added ESLint check 5 | * Some code refactoring 6 | 7 | #### v1.1.2 (08-09-2017) 8 | * Some code refactoring 9 | 10 | #### v1.1.1 (08-05-2017) 11 | * Year and url update 12 | 13 | #### v1.1.0 (05-08-2016) 14 | * Added `zIndex` parameter 15 | * Some code refactoring 16 | 17 | #### v1.0.0 (11-19-2014) 18 | * Added button size 19 | 20 | #### v0.7.0 (11-19-2014) 21 | * Fixed multiple click bug (issue #4) 22 | * Some code changes 23 | 24 | #### v0.6.0 (07-18-2014) 25 | * Some code changes 26 | 27 | #### v0.5.2 (07-14-2014) 28 | * Added bower support 29 | 30 | #### v0.5.1 (05-10-2014) 31 | * Bugfix: location of title as text was setted wrong 32 | 33 | #### v0.5.0 (05-10-2014) 34 | * Added the option to transform the hover title to a real text (positioned under the button). 35 | 36 | #### v0.4.0 (05-06-2014) 37 | * Added the option `title` that permits to add a text on the button mouse hover 38 | 39 | #### v0.3.0 (04-09-2014) 40 | * Renamed the option `animationSpeed` in `goupAnimation` 41 | * Added the option to choose the type of animation on the show/hide events of the button 42 | * Added a check on the scroll event: if the web page reloads over the specified trigger, the button is automatically shown without scrolling 43 | 44 | #### v0.2.0 (04-08-2014) 45 | * Added the option to make the button always visible (bypassing the trigger option) 46 | * Added the option to change the container and class colors 47 | 48 | #### v0.1.6 (04-06-2014) 49 | * Fixed a bug for Firefox 28 preventing the button to show up. 50 | 51 | #### v0.1.5 (04-06-2014) 52 | * Added width threshold (_hideUnderWidth_) to hide the button on small screens. 53 | 54 | #### v0.1.0 (04-05-2014) 55 | * Initial Release -------------------------------------------------------------------------------- /dist/jquery.goup.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * Copyright (c) 2014-2018 Daniele Lenares (https://github.com/dnlnrs) 4 | * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 5 | * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. 6 | * 7 | * Version 1.1.3 8 | * 9 | */ 10 | (function(a){'use strict';function b(d,e,f){'show'===e?'fade'===f?d.fadeIn():'slide'===f?d.slideDown():d.fadeIn():'fade'===f?d.fadeOut():'slide'===f?d.slideUp():d.fadeOut()}function c(d,e){var f=!0;d.on('click',function(){!0==f&&(f=!1,a('html, body').animate({scrollTop:0},e,function(){f=!0}))})}a.goup=function(d){var e=a.extend({location:'right',locationOffset:20,bottomOffset:10,containerSize:40,containerRadius:10,containerClass:'goup-container',arrowClass:'goup-arrow',alwaysVisible:!1,trigger:500,entryAnimation:'fade',goupSpeed:'slow',hideUnderWidth:500,containerColor:'#000',arrowColor:'#fff',title:'',titleAsText:!1,titleAsTextClass:'goup-text',zIndex:1},d);'right'!==e.location&&'left'!==e.location&&(e.location='right'),0>e.locationOffset&&(e.locationOffset=0),0>e.bottomOffset&&(e.bottomOffset=0),20>e.containerSize&&(e.containerSize=20),0>e.containerRadius&&(e.containerRadius=0),0>e.trigger&&(e.trigger=0),0>e.hideUnderWidth&&(e.hideUnderWidth=0);var f=/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i;f.test(e.containerColor)||(e.containerColor='#000'),f.test(e.arrowColor)||(e.arrowColor='#fff'),''===e.title&&(e.titleAsText=!1),isNaN(e.zIndex)&&(e.zIndex=1);var g=a('body'),h=a(window),i=a('
');i.addClass(e.containerClass);var j=a('
');j.addClass(e.arrowClass),i.html(j),g.append(i);var k={position:'fixed',width:e.containerSize,height:e.containerSize,background:e.containerColor,cursor:'pointer',display:'none','z-index':e.zIndex};if(k.bottom=e.bottomOffset,k[e.location]=e.locationOffset,k['border-radius']=e.containerRadius,i.css(k),!e.titleAsText)i.attr('title',e.title);else{var l=a('
');g.append(l),l.addClass(e.titleAsTextClass).text(e.title),l.attr('style',i.attr('style')),l.css('background','transparent').css('width',e.containerSize+40).css('height','auto').css('text-align','center').css(e.location,e.locationOffset-20);var m=parseInt(l.height())+10,n=parseInt(i.css('bottom'));i.css('bottom',m+n)}var p=0.25*e.containerSize,q={width:0,height:0,margin:'0 auto','padding-top':Math.ceil(0.325*e.containerSize),'border-style':'solid','border-width':'0 '+p+'px '+p+'px '+p+'px','border-color':'transparent transparent '+e.arrowColor+' transparent'};j.css(q);var r=!1;h.resize(function(){h.outerWidth()<=e.hideUnderWidth?(r=!0,b(i,'hide',e.entryAnimation),'undefined'!=typeof l&&b(l,'hide',e.entryAnimation)):(r=!1,h.trigger('scroll'))}),h.outerWidth()<=e.hideUnderWidth&&(r=!0,i.hide(),'undefined'!=typeof l&&l.hide()),e.alwaysVisible?(b(i,'show',e.entryAnimation),'undefined'!=typeof l&&b(l,'show',e.entryAnimation)):h.scroll(function(){h.scrollTop()>=e.trigger&&!r&&(b(i,'show',e.entryAnimation),'undefined'!=typeof l&&b(l,'show',e.entryAnimation)),h.scrollTop()=e.trigger&&!r&&(b(i,'show',e.entryAnimation),'undefined'!=typeof l&&b(l,'show',e.entryAnimation)),c(i,e.goupSpeed),'undefined'!=typeof l&&c(l,e.goupSpeed)}})(jQuery); 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jQuery GoUp! 2 | A simple jQuery plugin that let users go back to the top of a web page. 3 | 4 | --- 5 | #### Easy Peasy 6 | Download the minified version of the plugin, include it after jQuery and: 7 | ``` 8 | 13 | ``` 14 | 15 | ### Demo 16 | Yeah! You can see a live demo here: http://dnlnrs.github.io/jquery-goup/ 17 | 18 | ### Options 19 | 20 | | Name | Description | Type | Default | 21 | |-------------------|------------------------------------------------------------------------------------------------|---------|----------------| 22 | | `location` | On which side the button will be shown ("left" or "right") | String | right | 23 | | `locationOffset` | How many pixel the button is distant from the edge of the screen, based on the location setted | Integer | 20 | 24 | | `bottomOffset` | How many pixel the button is distant from the bottom edge of the screen | Integer | 10 | 25 | | `containerSize` | The width and height of the button (minimum is 20) | Integer | 40 | 26 | | `containerRadius` | Let you transform a square in a circle (yeah, it's magic!) | Integer | 10 | 27 | | `containerClass` | The class name given to the button container | String | goup-container | 28 | | `arrowClass` | The class name given to the arrow container | String | goup-arrow | 29 | | `containerColor` | The color of the container (in hex format) | String | #000 | 30 | | `arrowColor` | The color of the arrow (in hex format) | String | #fff | 31 | | `trigger` | After how many scrolled down pixels the button must be shown (bypassed by `alwaysVisible`) | Integer | 500 | 32 | | `entryAnimation` | The animation of the show and hide events of the button ("slide" or "fade") | String | fade | 33 | | `alwaysVisible` | Set to true if u want the button to be always visible (bypass `trigger`) | Boolean | false | 34 | | `goupSpeed` | The speed at which the user will be brought back to the top ("slow", "normal" or "fast") | String | slow | 35 | | `hideUnderWidth` | The threshold of window width under which the button is permanently hidden | Integer | 500 | 36 | | `title` | A text to show on the button mouse hover | String | '' | 37 | | `titleAsText` | If true the hover title becomes a true text under the button | Boolean | false | 38 | | `titleAsTextClass`| The class name given to the title text | String | goup-text | 39 | | `zIndex` | Set the z-index | Integer | 1 | 40 | 41 | ### Changelog 42 | #### v1.1.3 (08-31-2017) 43 | * Added ESLint check 44 | * Some code refactoring 45 | 46 | #### v1.1.2 (08-09-2017) 47 | * Some code refactoring 48 | 49 | #### v1.1.1 (08-05-2017) 50 | * Year and url update 51 | 52 | #### v1.1.0 (05-08-2016) 53 | * Added `zIndex` parameter 54 | * Some code refactoring 55 | 56 | For more changelog info check the `CHANGELOG.md` file. 57 | 58 | ### License and Copyright 59 | jQuery GoUp! is dual licensed under the [GPL](http://www.gnu.org/licenses/gpl.html) and [MIT](http://www.opensource.org/licenses/mit-license.php) licenses. 60 | 61 | (c) 2014-2018 Daniele Lenares 62 | -------------------------------------------------------------------------------- /src/jquery.goup.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * Copyright (c) 2014-2018 Daniele Lenares (https://github.com/dnlnrs) 4 | * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 5 | * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. 6 | * 7 | * Version 1.1.3 8 | * 9 | */ 10 | (function ($) { 11 | 12 | 'use strict'; 13 | 14 | /** 15 | * Animate the input object 16 | * 17 | * @param $obj 18 | * @param type 19 | * @param animation 20 | */ 21 | function do_animation($obj, type, animation) { 22 | if (type === 'show') { 23 | switch (animation) { 24 | case 'fade': 25 | $obj.fadeIn(); 26 | break; 27 | 28 | case 'slide': 29 | $obj.slideDown(); 30 | break; 31 | 32 | default: 33 | $obj.fadeIn(); 34 | } 35 | } else { 36 | switch (animation) { 37 | case 'fade': 38 | $obj.fadeOut(); 39 | break; 40 | 41 | case 'slide': 42 | $obj.slideUp(); 43 | break; 44 | 45 | default: 46 | $obj.fadeOut(); 47 | } 48 | } 49 | } 50 | 51 | /** 52 | * Bind click event 53 | * 54 | * @param $obj 55 | * @param speed 56 | */ 57 | function click_event($obj, speed) { 58 | var not_clicked = true; 59 | $obj.on('click', function () { 60 | if (not_clicked === true) { 61 | not_clicked = false; 62 | $('html, body').animate({scrollTop: 0}, speed, function () { 63 | not_clicked = true; 64 | }); 65 | } 66 | }); 67 | } 68 | 69 | 70 | $.goup = function (user_params) { 71 | 72 | /* Default Params */ 73 | var params = $.extend({ 74 | location: 'right', 75 | locationOffset: 20, 76 | bottomOffset: 10, 77 | containerSize: 40, 78 | containerRadius: 10, 79 | containerClass: 'goup-container', 80 | arrowClass: 'goup-arrow', 81 | alwaysVisible: false, 82 | trigger: 500, 83 | entryAnimation: 'fade', 84 | goupSpeed: 'slow', 85 | hideUnderWidth: 500, 86 | containerColor: '#000', 87 | arrowColor: '#fff', 88 | title: '', 89 | titleAsText: false, 90 | titleAsTextClass: 'goup-text', 91 | zIndex: 1 92 | }, user_params); 93 | /* */ 94 | 95 | /* Parameters check */ 96 | if (params.location !== 'right' && params.location !== 'left') { 97 | params.location = 'right'; 98 | } 99 | 100 | if (params.locationOffset < 0) { 101 | params.locationOffset = 0; 102 | } 103 | 104 | if (params.bottomOffset < 0) { 105 | params.bottomOffset = 0; 106 | } 107 | 108 | if (params.containerSize < 20) { 109 | params.containerSize = 20; 110 | } 111 | 112 | if (params.containerRadius < 0) { 113 | params.containerRadius = 0; 114 | } 115 | 116 | if (params.trigger < 0) { 117 | params.trigger = 0; 118 | } 119 | 120 | if (params.hideUnderWidth < 0) { 121 | params.hideUnderWidth = 0; 122 | } 123 | 124 | var checkColor = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i; 125 | if (!checkColor.test(params.containerColor)) { 126 | params.containerColor = '#000'; 127 | } 128 | if (!checkColor.test(params.arrowColor)) { 129 | params.arrowColor = '#fff'; 130 | } 131 | 132 | if (params.title === '') { 133 | params.titleAsText = false; 134 | } 135 | 136 | if (isNaN(params.zIndex)) { 137 | params.zIndex = 1; 138 | } 139 | /* */ 140 | 141 | /* Create required elements */ 142 | var $body = $('body'); 143 | var $window = $(window); 144 | 145 | var $container = $('
'); 146 | $container.addClass(params.containerClass); 147 | var $arrow = $('
'); 148 | $arrow.addClass(params.arrowClass); 149 | 150 | $container.html($arrow); 151 | 152 | $body.append($container); 153 | 154 | 155 | /* Container Style */ 156 | var containerStyle = { 157 | position: 'fixed', 158 | width: params.containerSize, 159 | height: params.containerSize, 160 | background: params.containerColor, 161 | cursor: 'pointer', 162 | display: 'none', 163 | 'z-index': params.zIndex 164 | }; 165 | containerStyle['bottom'] = params.bottomOffset; 166 | containerStyle[params.location] = params.locationOffset; 167 | containerStyle['border-radius'] = params.containerRadius; 168 | 169 | $container.css(containerStyle); 170 | 171 | if (!params.titleAsText) { 172 | $container.attr('title', params.title); 173 | } else { 174 | var $textContainer = $('
'); 175 | $body.append($textContainer); 176 | $textContainer.addClass(params.titleAsTextClass).text(params.title); 177 | $textContainer.attr('style', $container.attr('style')); 178 | $textContainer.css('background', 'transparent') 179 | .css('width', params.containerSize + 40) 180 | .css('height', 'auto') 181 | .css('text-align', 'center') 182 | .css(params.location, params.locationOffset - 20); 183 | var textContainerHeight = parseInt($textContainer.height()) + 10; 184 | var containerBottom = parseInt($container.css('bottom')); 185 | var containerNewBottom = textContainerHeight + containerBottom; 186 | $container.css('bottom', containerNewBottom); 187 | } 188 | 189 | 190 | /* Arrow Style */ 191 | var borderSize = 0.25 * params.containerSize; 192 | var arrowStyle = { 193 | width: 0, 194 | height: 0, 195 | margin: '0 auto', 196 | 'padding-top': Math.ceil(0.325 * params.containerSize), 197 | 'border-style': 'solid', 198 | 'border-width': '0 ' + borderSize + 'px ' + borderSize + 'px ' + borderSize + 'px', 199 | 'border-color': 'transparent transparent ' + params.arrowColor + ' transparent' 200 | }; 201 | $arrow.css(arrowStyle); 202 | /* */ 203 | 204 | 205 | /* params.trigger Hide under a certain width */ 206 | var isHidden = false; 207 | $window.resize(function () { 208 | if ($window.outerWidth() <= params.hideUnderWidth) { 209 | isHidden = true; 210 | do_animation($container, 'hide', params.entryAnimation); 211 | if (typeof($textContainer) !== 'undefined') { 212 | do_animation($textContainer, 'hide', params.entryAnimation); 213 | } 214 | } else { 215 | isHidden = false; 216 | $window.trigger('scroll'); 217 | } 218 | }); 219 | /* If i load the page under a certain width, i don't have the event 'resize' */ 220 | if ($window.outerWidth() <= params.hideUnderWidth) { 221 | isHidden = true; 222 | $container.hide(); 223 | if (typeof($textContainer) !== 'undefined') 224 | $textContainer.hide(); 225 | } 226 | 227 | 228 | /* params.trigger show event */ 229 | if (!params.alwaysVisible) { 230 | $window.scroll(function () { 231 | if ($window.scrollTop() >= params.trigger && !isHidden) { 232 | do_animation($container, 'show', params.entryAnimation); 233 | if (typeof($textContainer) !== 'undefined') { 234 | do_animation($textContainer, 'show', params.entryAnimation); 235 | } 236 | } else { 237 | do_animation($container, 'hide', params.entryAnimation); 238 | if (typeof($textContainer) !== 'undefined') { 239 | do_animation($textContainer, 'hide', params.entryAnimation); 240 | } 241 | } 242 | }); 243 | } else { 244 | do_animation($container, 'show', params.entryAnimation); 245 | if (typeof($textContainer) !== 'undefined') { 246 | do_animation($textContainer, 'show', params.entryAnimation); 247 | } 248 | } 249 | /* If i load the page and the scroll is over the trigger, i don't have immediately the event 'scroll' */ 250 | if ($window.scrollTop() >= params.trigger && !isHidden) { 251 | do_animation($container, 'show', params.entryAnimation); 252 | if (typeof($textContainer) !== 'undefined') { 253 | do_animation($textContainer, 'show', params.entryAnimation); 254 | } 255 | } 256 | 257 | click_event($container, params.goupSpeed); 258 | if (typeof($textContainer) !== 'undefined') { 259 | click_event($textContainer, params.goupSpeed); 260 | } 261 | }; 262 | }(jQuery)); 263 | --------------------------------------------------------------------------------