diff --git a/lib/assets/javascripts/utils/scrollTo.js b/lib/assets/javascripts/utils/scrollTo.js
new file mode 100644
index 0000000..a1d4a96
--- /dev/null
+++ b/lib/assets/javascripts/utils/scrollTo.js
@@ -0,0 +1,16 @@
+import { isString, isNumber } from './isType';
+
+/*
+  Scrolls browser window to the selector specified
+  @param selector - String CSS selector
+  @param duration (optional) - Number or String that determines how long the animation will run
+*/
+export const scrollTo = (selector, duration) => {
+  if (isString(selector)) {
+    $('html, body').animate({
+      scrollTop: $(selector).offset().top,
+    }, isNumber(duration) || isString(duration) ? duration : 500);
+  }
+};
+
+export { scrollTo as default };
diff --git a/lib/assets/javascripts/views/roles/edit.js b/lib/assets/javascripts/views/roles/edit.js
index 2ff79d3..9ca9602 100644
--- a/lib/assets/javascripts/views/roles/edit.js
+++ b/lib/assets/javascripts/views/roles/edit.js
@@ -1,5 +1,6 @@
 import { renderNotice, renderAlert } from '../../utils/notificationHelper';
 import { isString, isObject } from '../../utils/isType';
+import { scrollTo } from '../../utils/scrollTo';
 
 $(() => {
   $('form.edit_role select').on('change', (e) => {
@@ -8,12 +9,14 @@
   $('form.edit_role').on('ajax:success', (e, data) => {
     if (isObject(data) && isString(data.msg)) {
       renderNotice(data.msg);
+      scrollTo('#notification-area');
     }
   });
   $('form.edit_role').on('ajax:error', (e, xhr) => {
     const error = xhr.responseJSON;
     if (isObject(error) && isString(error)) {
       renderAlert(error.msg);
+      scrollTo('#notification-area');
     }
   });
 });