AC-1163 when possible scroll browser to source of an input error right after a save fails. Implemented jquery plugin ScrollTo.

2024-11-02 01:21:21 +03:00 · 2014-04-11 03:17:53 -04:00 · 2014-04-11 03:17:53 -04:00 · 06cf3a2aec
commit 06cf3a2aec
parent 0d753b74d0
11 changed files with 11793 additions and 0 deletions
--- a/awx/ui/static/lib/ansible/Utilities.js
+++ b/awx/ui/static/lib/ansible/Utilities.js
@ -176,6 +176,7 @@ angular.module('Utilities', ['RestServices', 'Utilities'])
                            scope[field + '_api_error'] = data[form.fields[field]][0];
                            //scope[form.name + '_form'][form.fields[field].realName].$setValidity('apiError', false);
                            $('[name="' + form.fields[field].realName + '"]').addClass('ng-invalid');
+                            $('[name="' + form.fields[field].realName + '"]').ScrollTo({ "onlyIfOutside": true, "offsetTop": 100 });
                            fieldErrors = true;
                        }
                    }
@ -185,6 +186,7 @@ angular.module('Utilities', ['RestServices', 'Utilities'])
                                data[field][0];
                            //scope[form.name + '_form'][form.fields[field].sourceModel + '_' + form.fields[field].sourceField].$setValidity('apiError', false);
                            $('[name="' + form.fields[field].sourceModel + '_' + form.fields[field].sourceField + '"]').addClass('ng-invalid');
+                            $('[name="' + form.fields[field].sourceModel + '_' + form.fields[field].sourceField + '"]').ScrollTo({ "onlyIfOutside": true, "offsetTop": 100 });
                            fieldErrors = true;
                        }
                    } else {
@ -192,6 +194,7 @@ angular.module('Utilities', ['RestServices', 'Utilities'])
                            scope[field + '_api_error'] = data[field][0];
                            //scope[form.name + '_form'][field].$setValidity('apiError', false);
                            $('[name="' + field + '"]').addClass('ng-invalid');
+                            $('[name="' + field + '"]').ScrollTo({ "onlyIfOutside": true, "offsetTop": 100 });
                            fieldErrors = true;
                        }
                    }
--- a/awx/ui/static/lib/scrollto/demo/index.html
+++ b/awx/ui/static/lib/scrollto/demo/index.html
@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Redirect</title>
+		<meta http-equiv="REFRESH" content="0;url=/">
+	</head>
+	<body>
+		This page has moved. You will be automatically redirected to its new location. If you aren't forwarded to the new page, <a href="/">click here</a>.
+	</body>
+</html>
--- a/awx/ui/static/lib/scrollto/index.html
+++ b/awx/ui/static/lib/scrollto/index.html
@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Standard Meta -->
+	<meta charset="utf-8"/>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1"/>
+
+	<!-- Include DocPad Meta -->
+	<meta http-equiv="X-Powered-By" content="DocPad v6.38.0"/>
+
+	<!-- Website Title -->
+	<title>jQuery ScrollTo - Smooth scroll to any jQuery/DOM element</title>
+
+	<!-- Include DocPad Styles + Our Own -->
+	
+
+
+	<!-- ============================== -->
+	<!-- Demo Requirements -->
+
+	<link rel="stylesheet" media="screen" href="./vendor/highlight.css" />
+	<link rel="stylesheet" media="screen" href="./styles/style.css" />
+</head>
+<body>
+	<!-- ============================== -->
+	<!-- Project Requirements -->
+
+	<!-- Include jQuery (Dependency of jQuery ScrollTo) -->
+	<script src="./vendor/jquery.js"></script>
+
+	<!-- Include jQuery ScrollTo -->
+	<script src="./lib/jquery-scrollto.js"></script>
+
+
+	<!-- ============================== -->
+	<!-- Demo -->
+
+	<div class="section links" id="links">
+		<h1>jQuery ScrollTo - Smooth scroll to any jQuery/DOM element</h1>
+		<h2><a href="https://github.com/balupton/jquery-scrollto/zipball/gh-pages" title="Download" id="download">Download</a></h2>
+		<h2><a href="http://balupton.github.com/jquery-scrollto" title="Demo Page">Demo Page</a></h2>
+		<h2><a href="https://github.com/balupton/jquery-scrollto" title="Project Page">Project Page</a></h2>
+		<h2><a href="https://github.com/balupton/jquery-scrollto/issues" title="Bug Tracker">Bug Tracker</a></h2>
+		<div class="social-buttons">
+			<div class="google-plus-one-button social-button">
+	<div class="g-plusone" data-size="medium" data-href="http%3A//balupton.github.com/jquery-scrollto"></div>
+	<script>
+		(function() {
+			var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
+			po.src = 'https://apis.google.com/js/plusone.js';
+			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
+		})();
+	</script>
+</div><div class="reddit-submit-button social-button">
+	<script type="text/javascript" src="http://en.reddit.com/static/button/button1.js"></script>
+</div><div class="hacker-news-submit-button social-button">
+	<a href="http://news.ycombinator.com/submit" class="hn-share-button" data-url="http://balupton.github.com/jquery-scrollto">Vote on HN</a>
+	<script>
+		(function(d, t) {
+			var g = d.createElement(t),
+				s = d.getElementsByTagName(t)[0];
+				g.src = '//hnbutton.appspot.com/static/hn.min.js';
+			s.parentNode.insertBefore(g, s);
+		}(document, 'script'));
+	</script>
+</div><div class="facebook-like-button social-button">
+	<iframe src="//www.facebook.com/plugins/like.php?href=http%3A//balupton.github.com/jquery-scrollto&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=266367676718271" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
+</div><div class="twitter-tweet-button social-button">
+	<a href="https://twitter.com/share" class="twitter-share-button" data-via="balupton" data-related="balupton">Tweet</a>
+	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+</div><div class="twitter-follow-button social-button">
+	<a href="https://twitter.com/balupton" class="twitter-follow-button" data-show-count="false">Follow @balupton</a>
+	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+</div><div class="github-follow-button social-button">
+	<iframe src="//ghbtns.com/github-btn.html?user=balupton&type=follow&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="165" height="20"></iframe>
+</div>
+		</div>
+	</div>
+
+	<div class="section about" id="about">
+		<h2>About</h2>
+
+		<p>
+			<strong>jQuery ScrollTo</strong> is a great way to smooth scroll to any jQuery/DOM element
+		</p>
+
+		<ul class="features">
+			<li><strong>Extremely simple to use:</strong> just call <code>$('#element).ScrollTo()</code> and your user will be smoothly scrolled to that element!</li>
+			<li><strong>Only 1KB in size!</strong> Making it the smallest ScrollTo plugin and won't slow you down.</li>
+			<li><strong>Supports all the elements you can throw at it!</strong> Even those ones in modals and scrollable areas! So you can now feel at ease knowing your user will always be scrolled to that correct place which you intended.</li>
+			<li><strong>It's even easy customise and work with!</strong> You can specify such options as <code>duration</code>, <code>easing</code>, and <code>callback</code> on your ScrollTo call.</li>
+		</ul>
+
+		<p>Enough talk, let's see it in action!</p>
+	</div>
+
+	<div class="section using" id="using">
+	<h2>Using</h2>
+
+	<div class="demo">
+		<div class="demo-links">Loading... please wait</div>
+		<div class="demo-pieces">
+			<div id="scrollto1" title="Scroll to #scrollto1">
+				#scrollto1:
+				<pre class="highlighted"><code class="javascript">$(<span class="string">'#scrollto1'</span>).ScrollTo();</code></pre>
+			</div>
+			<div id="scrollto2" title="Scroll to #scrollto2 with a 2 second duration and `linear` easing">
+				#scrollto2
+				<pre class="highlighted"><code class="javascript">$(<span class="string">'#scrollto2'</span>).ScrollTo({
+    duration: <span class="number">2000</span>,
+    easing: <span class="string">'linear'</span>
+});</code></pre>
+			</div>
+			<div id="scrollto3" title="Scroll to #scrollto3 with a 2 second duration and durationMode set to `all`">
+				#scrollto3
+				<pre class="highlighted"><code class="javascript">$(<span class="string">'#scrollto3'</span>).ScrollTo({
+    duration: <span class="number">2000</span>,
+    durationMode: <span class="string">'all'</span>
+});</code></pre>
+			</div>
+			<div id="scrollto4" title="Scroll to #scrollto4 with a 2 second duration and a callback on scroll completion">
+				#scrollto4
+				<pre class="highlighted"><code class="javascript">$(<span class="string">'#scrollto4'</span>).ScrollTo({
+    duration: <span class="number">2000</span>,
+    callback: <span class="keyword">function</span>(){
+        alert(<span class="string">'Scrolling has now completed.'</span>);
+    }
+});</code></pre>
+			</div>
+			<div id="scrollto5" style="margin-left:600px;" title="Scroll to #scrollto5 with a horizontal scroll">
+				#scrollto5
+				<pre class="highlighted"><code class="javascript">$(<span class="string">'#scrollto5'</span>).ScrollTo();</code></pre>
+			</div>
+			<div id="scrollto6" style="margin-left:600px;" title="Scroll to #scrollto6 only if it is outside the visible area">
+				#scrollto6
+				<pre class="highlighted"><code class="javascript">$(<span class="string">'#scrollto6'</span>).ScrollTo({
+    onlyIfOutside: <span class="literal">true</span>
+});</code></pre>
+			</div>
+		</div>
+		<script>
+			/* Generate the links automatically from the pieces */
+			$(function(){
+				var $links = $('.demo-links').empty();
+				var $pieces = $('.demo-pieces').children();
+				$pieces.each(function(){
+					var $piece = $(this);
+					var $link = $('<a>',{
+						text: $piece.attr('title')
+					}).on('click',function(){
+						eval($piece.find('code').text());
+					}).appendTo($links)
+				});
+			});
+		</script>
+	</div>
+</div>
+
+	<div class="section install" id="install">
+		<h2>Installation</h2>
+
+		<h3>Step 1. <a href="https://github.com/balupton/jquery-scrollto/zipball/gh-pages" title="Download">Download</a> jQuery ScrollTo, and extract it to your hard drive</h3>
+		<div>
+			As everyones extraction process is a little bit different be sure of the following:
+			<ul class="install">
+				<li>If the archive was extracted and you have a whole bunch of files and directories (folders), then you must create a new directory called <code>jquery-scrollto</code> and move all the files and directories into that to continue.</li>
+				<li>If the archive was extracted and you have only one directory called <code>jquery-scrollto</code> which has a whole bunch of stuff in it, then that is fine and you can continue onto the next step.</li>
+				<li>If the archive was extracted and you have only one directory and it is not called <code>jquery-scrollto</code> then you must rename it to <code>jquery-scrollto</code> to continue.</li>
+			</ul>
+		</div>
+
+		<h3>Step 2. Move the <code>jquery-scrollto</code> directory to somewhere on your webserver</h3>
+		<p>Be sure to always keep the entire <code>jquery-scrollto</code> directory intact; this means if you were to only move some of the files instead of moving the entire directory, then you would run into problems due to the cross directory references would no longer be working.</p>
+
+		<h3>Step 3. Include jQuery (insert into your page's head tag)</h3>
+		<p>If your page already has jQuery included then you can skip this step.</p>
+		<pre class="highlighted"><code class="xml"><span class="comment">&lt;!-- Include jQuery (Dependency of jQuery ScrollTo) --&gt;</span>
+<span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"http://www.yoursite.com/somewhere/on/your/webserver/jquery-scrollto/vendor/jquery.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></pre>
+
+		<h3>Step 4. Include jQuery ScrollTo (insert into your page's head tag)</h3>
+		<pre class="highlighted"><code class="xml"><span class="comment">&lt;!-- Include jQuery ScrollTo --&gt;</span>
+<span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"http://www.yoursite.com/somewhere/on/your/webserver/jquery-scrollto/lib/jquery-scrollto.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></pre>
+	</div>
+
+	<div class="section">
+		<h2>Enjoy!!!</h2>
+		<p>
+			If anything isn't working the way you want it to, or if you would like to request a feature or provide praise or general feedback then be sure to click the feedback button to the right, or the "Get Support" link up the top of this page.
+		</p>
+		<p>
+			This work is powered by coffee and distributed for free. Donations are how we afford our coffee. Coffee is how we stay awake after our day job hours to work on things like this free open-source project which you're looking at. So go ahead, and get that warm fuzzy feeling knowing you just helped some poor fellow working after hours for free to buy his coffee. You only need to spare a few dollars, or as much as you feel this piece of work is worth. Thanks so much. Alternatively; if you are not in a donating mood, then spreading the word about this project on twitter, your blog, or whatever is just as good. You can also give praise by clicking the feedback button or visiting our "Get Support" link. Thanks a bunch, we appreciate the help deeply.
+		</p>
+		<a href="https://www.paypal.com/au/cgi-bin/webscr?cmd=_flow&SESSION=IHj3DG3oy_N9A9ZDIUnPksOi59v0i-EWDTunfmDrmU38Tuohg_xQTx0xcjq&dispatch=5885d80a13c0db1f8e263663d3faee8d14f86393d55a810282b64afed84968ec" title="Donate once-off to this project via Paypal">
+			<img src="//www.paypalobjects.com/en_AU/i/btn/btn_donate_SM.gif" alt="Paypal donation button"/>
+		</a>
+		<p>
+			Licensed under the <a rel="license" href="http://creativecommons.org/licenses/MIT/">MIT License</a>.
+		</p>
+		<br />
+	</div>
+
+
+	<!-- ============================== -->
+	<!-- Demo Requirements -->
+
+	<!-- Include DocPad Scripts -->
+	<script >var _gauges = _gauges || [];
+(function(){
+	var t = document.createElement('script');
+	t.type = 'text/javascript';
+	t.async = true;
+	t.id = 'gauges-tracker';
+	t.setAttribute('data-site-id', '51a70cd2f5a1f52bb100000a');
+	t.src = '//secure.gaug.es/track.js';
+	var s = document.getElementsByTagName('script')[0];
+	s.parentNode.insertBefore(t, s);
+})();</script><script >var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-4446117-1']);
+_gaq.push(['_trackPageview']);
+(function(){
+	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();</script>
+</body>
+</html>
--- a/awx/ui/static/lib/scrollto/lib/jquery-scrollto.js
+++ b/awx/ui/static/lib/scrollto/lib/jquery-scrollto.js
@ -0,0 +1,261 @@
+/*global define:false require:false */
+(function (name, context, definition) {
+	if (typeof module != 'undefined' && module.exports) module.exports = definition();
+	else if (typeof define == 'function' && define.amd) define(definition);
+	else context[name] = definition();
+})('jquery-scrollto', this, function(){
+	// Prepare
+	var jQuery, $, ScrollTo;
+	jQuery = $ = window.jQuery || require('jquery');
+
+	// Fix scrolling animations on html/body on safari
+	$.propHooks.scrollTop = $.propHooks.scrollLeft = {
+		get: function(elem,prop) {
+			var result = null;
+			if ( elem.tagName === 'HTML' || elem.tagName === 'BODY' ) {
+				if ( prop === 'scrollLeft' ) {
+					result = window.scrollX;
+				} else if ( prop === 'scrollTop' ) {
+					result = window.scrollY;
+				}
+			}
+			if ( result == null ) {
+				result = elem[prop];
+			}
+			return result;
+		}
+	};
+	$.Tween.propHooks.scrollTop = $.Tween.propHooks.scrollLeft = {
+		get: function(tween) {
+			return $.propHooks.scrollTop.get(tween.elem, tween.prop);
+		},
+		set: function(tween) {
+			// Our safari fix
+			if ( tween.elem.tagName === 'HTML' || tween.elem.tagName === 'BODY' ) {
+				// Defaults
+				tween.options.bodyScrollLeft = (tween.options.bodyScrollLeft || window.scrollX);
+				tween.options.bodyScrollTop = (tween.options.bodyScrollTop || window.scrollY);
+
+				// Apply
+				if ( tween.prop === 'scrollLeft' ) {
+					tween.options.bodyScrollLeft = Math.round(tween.now);
+				}
+				else if ( tween.prop === 'scrollTop' ) {
+					tween.options.bodyScrollTop = Math.round(tween.now);
+				}
+
+				// Apply
+				window.scrollTo(tween.options.bodyScrollLeft, tween.options.bodyScrollTop);
+			}
+			// jQuery's IE8 Fix
+			else if ( tween.elem.nodeType && tween.elem.parentNode ) {
+				tween.elem[ tween.prop ] = tween.now;
+			}
+		}
+	};
+
+	// jQuery ScrollTo
+	ScrollTo = {
+		// Configuration
+		config: {
+			duration: 400,
+			easing: 'swing',
+			callback: undefined,
+			durationMode: 'each',
+			offsetTop: 0,
+			offsetLeft: 0
+		},
+
+		// Set Configuration
+		configure: function(options){
+			// Apply Options to Config
+			$.extend(ScrollTo.config, options||{});
+
+			// Chain
+			return this;
+		},
+
+		// Perform the Scroll Animation for the Collections
+		// We use $inline here, so we can determine the actual offset start for each overflow:scroll item
+		// Each collection is for each overflow:scroll item
+		scroll: function(collections, config){
+			// Prepare
+			var collection, $container, container, $target, $inline, position, containerTagName,
+				containerScrollTop, containerScrollLeft,
+				containerScrollTopEnd, containerScrollLeftEnd,
+				startOffsetTop, targetOffsetTop, targetOffsetTopAdjusted,
+				startOffsetLeft, targetOffsetLeft, targetOffsetLeftAdjusted,
+				scrollOptions,
+				callback;
+
+			// Determine the Scroll
+			collection = collections.pop();
+			$container = collection.$container;
+			$target = collection.$target;
+			containerTagName = $container.prop('tagName');
+
+			// Prepare the Inline Element of the Container
+			$inline = $('<span/>').css({
+				'position': 'absolute',
+				'top': '0px',
+				'left': '0px'
+			});
+			position = $container.css('position');
+
+			// Insert the Inline Element of the Container
+			$container.css({position:'relative'});
+			$inline.appendTo($container);
+
+			// Determine the top offset
+			startOffsetTop = $inline.offset().top;
+			targetOffsetTop = $target.offset().top;
+			targetOffsetTopAdjusted = targetOffsetTop - startOffsetTop - parseInt(config.offsetTop,10);
+
+			// Determine the left offset
+			startOffsetLeft = $inline.offset().left;
+			targetOffsetLeft = $target.offset().left;
+			targetOffsetLeftAdjusted = targetOffsetLeft - startOffsetLeft - parseInt(config.offsetLeft,10);
+
+			// Determine current scroll positions
+			containerScrollTop = $container.prop('scrollTop');
+			containerScrollLeft = $container.prop('scrollLeft');
+
+			// Reset the Inline Element of the Container
+			$inline.remove();
+			$container.css({position:position});
+
+			// Prepare the scroll options
+			scrollOptions = {};
+
+			// Prepare the callback
+			callback = function(event){
+				// Check
+				if ( collections.length === 0 ) {
+					// Callback
+					if ( typeof config.callback === 'function' ) {
+						config.callback();
+					}
+				}
+				else {
+					// Recurse
+					ScrollTo.scroll(collections,config);
+				}
+				// Return true
+				return true;
+			};
+
+			// Handle if we only want to scroll if we are outside the viewport
+			if ( config.onlyIfOutside ) {
+				// Determine current scroll positions
+				containerScrollTopEnd = containerScrollTop + $container.height();
+				containerScrollLeftEnd = containerScrollLeft + $container.width();
+
+				// Check if we are in the range of the visible area of the container
+				if ( containerScrollTop < targetOffsetTopAdjusted && targetOffsetTopAdjusted < containerScrollTopEnd ) {
+					targetOffsetTopAdjusted = containerScrollTop;
+				}
+				if ( containerScrollLeft < targetOffsetLeftAdjusted && targetOffsetLeftAdjusted < containerScrollLeftEnd ) {
+					targetOffsetLeftAdjusted = containerScrollLeft;
+				}
+			}
+
+			// Determine the scroll options
+			if ( targetOffsetTopAdjusted !== containerScrollTop ) {
+				scrollOptions.scrollTop = targetOffsetTopAdjusted;
+			}
+			if ( targetOffsetLeftAdjusted !== containerScrollLeft ) {
+				scrollOptions.scrollLeft = targetOffsetLeftAdjusted;
+			}
+
+			// Check to see if the scroll is necessary
+			if ( $container.prop('scrollHeight') === $container.width() ) {
+				delete scrollOptions.scrollTop;
+			}
+			if ( $container.prop('scrollWidth') === $container.width() ) {
+				delete scrollOptions.scrollLeft;
+			}
+
+			// Perform the scroll
+			if ( scrollOptions.scrollTop != null || scrollOptions.scrollLeft != null ) {
+				$container.animate(scrollOptions, {
+					duration: config.duration,
+					easing: config.easing,
+					complete: callback
+				});
+			}
+			else {
+				callback();
+			}
+
+			// Return true
+			return true;
+		},
+
+		// ScrollTo the Element using the Options
+		fn: function(options){
+			// Prepare
+			var collections, config, $container, container;
+			collections = [];
+
+			// Prepare
+			var	$target = $(this);
+			if ( $target.length === 0 ) {
+				// Chain
+				return this;
+			}
+
+			// Handle Options
+			config = $.extend({},ScrollTo.config,options);
+
+			// Fetch
+			$container = $target.parent();
+			container = $container.get(0);
+
+			// Cycle through the containers
+			while ( ($container.length === 1) && (container !== document.body) && (container !== document) ) {
+				// Check Container for scroll differences
+				var containerScrollTop, containerScrollLeft;
+				containerScrollTop = $container.css('overflow-y') !== 'visible' && container.scrollHeight !== container.clientHeight;
+				containerScrollLeft =  $container.css('overflow-x') !== 'visible' && container.scrollWidth !== container.clientWidth;
+				if ( containerScrollTop || containerScrollLeft ) {
+					// Push the Collection
+					collections.push({
+						'$container': $container,
+						'$target': $target
+					});
+					// Update the Target
+					$target = $container;
+				}
+				// Update the Container
+				$container = $container.parent();
+				container = $container.get(0);
+			}
+
+			// Add the final collection
+			collections.push({
+				'$container': $('html'),
+				// document.body doesn't work in firefox, html works for all
+				// internet explorer starts at the beggining
+				'$target': $target
+			});
+
+			// Adjust the Config
+			if ( config.durationMode === 'all' ) {
+				config.duration /= collections.length;
+			}
+
+			// Handle
+			ScrollTo.scroll(collections,config);
+
+			// Chain
+			return this;
+		}
+	};
+
+	// Apply our extensions to jQuery
+	$.ScrollTo = $.ScrollTo || ScrollTo;
+	$.fn.ScrollTo = $.fn.ScrollTo || ScrollTo.fn;
+
+	// Export
+	return ScrollTo;
+});
--- a/awx/ui/static/lib/scrollto/styles/generic.css
+++ b/awx/ui/static/lib/scrollto/styles/generic.css
@ -0,0 +1,37 @@
+body{padding-left:0;padding-right:0;font-family:Arial,Helvetica,sans-serif;color:#000;}
+body.loading{cursor:wait}
+.clear{clear:left}
+h1{font-size:2.5em;font-weight:bold;margin:.67em 0 .5em}
+h2{font-size:2em;font-weight:bold;margin:.83em 0 .4em}
+h3{font-size:1.5em;font-weight:bold;margin:.83em 0 .3em}
+pre > code{border:5px solid #ddd;padding:7px;font-size:14px;overflow:auto;max-height:500px;width:100%;white-space:pre;display:block}
+span.code{font-family:"Courier New",Courier,monospace;margin-left:10px;padding-left:10px;font-size:11px;border-left:1px solid #000}
+strong{font-weight:bold}
+em{font-style:italic}
+p,.section div{padding:0;margin:1em 0}
+.section.install p,.section.install div{margin:.2em 0 1em}
+textarea{width:100%}
+label{font-weight:bold}
+.cols.two{position:relative;overflow:auto}
+.cols .one{width:49%;float:left}
+.cols .two{width:49%;float:right}
+a.help{text-decoration:none;border-bottom:1px dotted #00e}
+a:visited{border-bottom:1px dotted #551a8b}
+.section{border-top:1px solid #bbb;margin-top:15px;margin-left:5%;margin-right:5%;padding:5px;padding-bottom:0;background-color:#fff;}
+.section ul{list-style:none;margin-top:5px;}
+.section ul li{display:inline}
+.section ul.features{display:block;list-style:disc;margin-left:2em;}
+.section ul.features li{list-style:disc;display:list-item}
+.section ul.install,.section ul.install li{list-style:disc outside none}
+.section ul.install{margin-left:2em;}
+.section ul.install li{display:list-item}
+.section .link{font-size:12px;font-style:italic;padding-left:10px;margin-left:10px}
+.section .title{font-weight:bold;font-size:16px}
+.section .important{text-decoration:underline}
+.section.header{text-align:center;font-size:12px;padding-top:10px;border-top:none}
+.section.footer{text-align:center;font-size:12px;padding-top:10px}
+.social-buttons .social-button{display:inline-block;width:100px;text-align:left;overflow:hidden;}
+.social-buttons .social-button.google-plus-one-button,.social-buttons .social-button.hacker-news-submit-button{width:80px}
+.social-buttons .social-button.github-follow-button,.social-buttons .social-button.twitter-follow-button{width:170px;height:auto}
+.social-buttons .social-button.reddit-submit-button{width:140px;}
+.social-buttons .social-button.reddit-submit-button iframe{padding-top:3px}
--- a/awx/ui/static/lib/scrollto/styles/style.css
+++ b/awx/ui/static/lib/scrollto/styles/style.css
@ -0,0 +1,6 @@
+@import url("../vendor/yui-cssreset.css");
+@import url("./generic.css");
+.demo a{cursor:pointer;color:#00f;display:block;margin-bottom:5px;}
+.demo a:hover{text-decoration:underline}
+.demo .demo-pieces{width:500px;height:200px;overflow:scroll;border:5px ridge #fff;}
+.demo .demo-pieces div{width:90%;height:300px;padding:15px 4%}
--- a/awx/ui/static/lib/scrollto/vendor/highlight.css
+++ b/awx/ui/static/lib/scrollto/vendor/highlight.css
@ -0,0 +1,129 @@
+/*
+
+github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+pre code {
+  display: block; padding: 0.5em;
+  color: #333;
+  background: #f8f8ff
+}
+
+pre .comment,
+pre .template_comment,
+pre .diff .header,
+pre .javadoc {
+  color: #998;
+  font-style: italic
+}
+
+pre .keyword,
+pre .css .rule .keyword,
+pre .winutils,
+pre .javascript .title,
+pre .nginx .title,
+pre .subst,
+pre .request,
+pre .status {
+  color: #333;
+  font-weight: bold
+}
+
+pre .number,
+pre .hexcolor,
+pre .ruby .constant {
+  color: #099;
+}
+
+pre .string,
+pre .tag .value,
+pre .phpdoc,
+pre .tex .formula {
+  color: #d14
+}
+
+pre .title,
+pre .id,
+pre .coffeescript .params,
+pre .scss .preprocessor {
+  color: #900;
+  font-weight: bold
+}
+
+pre .javascript .title,
+pre .lisp .title,
+pre .clojure .title,
+pre .subst {
+  font-weight: normal
+}
+
+pre .class .title,
+pre .haskell .type,
+pre .vhdl .literal,
+pre .tex .command {
+  color: #458;
+  font-weight: bold
+}
+
+pre .tag,
+pre .tag .title,
+pre .rules .property,
+pre .django .tag .keyword {
+  color: #000080;
+  font-weight: normal
+}
+
+pre .attribute,
+pre .variable,
+pre .lisp .body {
+  color: #008080
+}
+
+pre .regexp {
+  color: #009926
+}
+
+pre .class {
+  color: #458;
+  font-weight: bold
+}
+
+pre .symbol,
+pre .ruby .symbol .string,
+pre .lisp .keyword,
+pre .tex .special,
+pre .prompt {
+  color: #990073
+}
+
+pre .built_in,
+pre .lisp .title,
+pre .clojure .built_in {
+  color: #0086b3
+}
+
+pre .preprocessor,
+pre .pi,
+pre .doctype,
+pre .shebang,
+pre .cdata {
+  color: #999;
+  font-weight: bold
+}
+
+pre .deletion {
+  background: #fdd
+}
+
+pre .addition {
+  background: #dfd
+}
+
+pre .diff .change {
+  background: #0086b3
+}
+
+pre .chunk {
+  color: #aaa
+}
--- a/awx/ui/static/lib/scrollto/vendor/jquery.js
+++ b/awx/ui/static/lib/scrollto/vendor/jquery.js
--- a/awx/ui/static/lib/scrollto/vendor/modernizr.js
+++ b/awx/ui/static/lib/scrollto/vendor/modernizr.js
--- a/awx/ui/static/lib/scrollto/vendor/yui-cssreset.css
+++ b/awx/ui/static/lib/scrollto/vendor/yui-cssreset.css
@ -0,0 +1,128 @@
+/*
+YUI 3.10.0 (build a03ce0e)
+Copyright 2013 Yahoo! Inc. All rights reserved.
+Licensed under the BSD License.
+http://yuilibrary.com/license/
+*/
+
+/*
+	TODO will need to remove settings on HTML since we can't namespace it.
+	TODO with the prefix, should I group by selector or property for weight savings?
+*/
+html{
+	color:#000;
+	background:#FFF;
+}
+/*
+	TODO remove settings on BODY since we can't namespace it.
+*/
+/*
+	TODO test putting a class on HEAD.
+		- Fails on FF. 
+*/
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+textarea,
+p,
+blockquote,
+th,
+td {
+	margin:0;
+	padding:0;
+}
+table {
+	border-collapse:collapse;
+	border-spacing:0;
+}
+fieldset,
+img {
+	border:0;
+}
+/*
+	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
+*/
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+strong,
+th,
+var {
+	font-style:normal;
+	font-weight:normal;
+}
+
+ol,
+ul {
+	list-style:none;
+}
+
+caption,
+th {
+	text-align:left;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-size:100%;
+	font-weight:normal;
+}
+q:before,
+q:after {
+	content:'';
+}
+abbr,
+acronym {
+	border:0;
+	font-variant:normal;
+}
+/* to preserve line-height and selector appearance */
+sup {
+	vertical-align:text-top;
+}
+sub {
+	vertical-align:text-bottom;
+}
+input,
+textarea,
+select {
+	font-family:inherit;
+	font-size:inherit;
+	font-weight:inherit;
+}
+/*to enable resizing for IE*/
+input,
+textarea,
+select {
+	*font-size:100%;
+}
+/*because legend doesn't inherit in IE */
+legend {
+	color:#000;
+}
+
+/* YUI CSS Detection Stamp */
+#yui3-css-stamp.cssreset { display: none; }
--- a/awx/ui/templates/ui/index.html
+++ b/awx/ui/templates/ui/index.html
@ -393,6 +393,7 @@
  <script src="{{ STATIC_URL }}lib/codemirror/addon/edit/closebrackets.js"></script>
  <script src="{{ STATIC_URL }}lib/codemirror/addon/edit/matchbrackets.js"></script>
  <script src="{{ STATIC_URL }}lib/codemirror/addon/selection/active-line.js"></script>
+  <script src="{{ STATIC_URL }}lib/scrollto/lib/jquery-scrollto.js"></script>

  <script>
      // When user clicks on main tab, fire the matching Angular route