diff --git a/resources/assets/javascripts/bootstrap/skip_links.js b/resources/assets/javascripts/bootstrap/skip_links.js
index cdd178f929c20c30558574b28d5733e399538dc3..097e2d0fa3b5ff306cc4daa4abe255ec8d10c5f3 100644
--- a/resources/assets/javascripts/bootstrap/skip_links.js
+++ b/resources/assets/javascripts/bootstrap/skip_links.js
@@ -1,8 +1 @@
 STUDIP.domReady(STUDIP.SkipLinks.initialize);
-
-jQuery(document).on('keyup', STUDIP.SkipLinks.showSkipLinkNavigation);
-jQuery(document).on('click', function(event) {
-    if (!jQuery(event.target).is('#skip_link_navigation a')) {
-        STUDIP.SkipLinks.moveSkipLinkNavigationOut();
-    }
-});
diff --git a/resources/assets/javascripts/lib/skip_links.js b/resources/assets/javascripts/lib/skip_links.js
index 4f5bd886e38dfeddd5ec2972ee05b6e305070ce8..75dc8bbafc5186f62b7f8a15e0fd461d81fc7555 100644
--- a/resources/assets/javascripts/lib/skip_links.js
+++ b/resources/assets/javascripts/lib/skip_links.js
@@ -10,56 +10,12 @@ const isSelectorValid = (dummyElement =>
 })(document.createDocumentFragment());
 
 const SkipLinks = {
-    activeElement: null,
-    navigationStatus: 0,
-
-    /**
-     * Displays the skip link navigation after first hitting the tab-key
-     * @param event: event-object of type keyup
-     */
-    showSkipLinkNavigation: function(event) {
-        if (event.keyCode === 9) {
-            //tab-key
-            SkipLinks.moveSkipLinkNavigationIn();
-        }
-    },
-
-    /**
-     * shows the skiplink-navigation window by moving it from the left
-     */
-    moveSkipLinkNavigationIn: function() {
-        if (SkipLinks.navigationStatus === 0) {
-            var VpWidth = jQuery(window).width();
-            jQuery('#skip_link_navigation li:first a').focus();
-            jQuery('#skip_link_navigation').css({ left: VpWidth / 2, opacity: 0 });
-            jQuery('#skip_link_navigation').animate({ opacity: 1.0 }, 500);
-            SkipLinks.navigationStatus = 1;
-        }
-    },
-
-    /**
-     * removes the skiplink-navigation window by moving it out of viewport
-     */
-    moveSkipLinkNavigationOut: function() {
-        if (SkipLinks.navigationStatus === 1) {
-            jQuery(SkipLinks.box).hide();
-            jQuery('#skip_link_navigation').animate({ opacity: 0 }, 500, function() {
-                jQuery(this).css('left', '-600px');
-            });
-        }
-        SkipLinks.navigationStatus = 2;
-    },
-
     /**
      * Inserts the list with skip links
      */
     insertSkipLinks: function() {
         jQuery('#skip_link_navigation').prepend(jQuery('#skiplink_list'));
-        jQuery('#skiplink_list').show();
         jQuery('#skip_link_navigation').attr('aria-busy', 'false');
-        jQuery('#skip_link_navigation').attr('tabindex', '-1');
-        SkipLinks.insertHeadLines();
-        return false;
     },
 
     /**
@@ -67,7 +23,7 @@ const SkipLinks = {
      * and highlights it
      */
     setActiveTarget (id) {
-        var fragment = null;
+        let fragment = null;
         // set active area only if skip links are activated
         if (!document.getElementById('skip_link_navigation')) {
             return false;
@@ -78,8 +34,7 @@ const SkipLinks = {
             fragment = document.location.hash;
         }
 
-        if (fragment.length > 0 && isSelectorValid(fragment) && fragment !== SkipLinks.activeElement && document.querySelector(fragment)) {
-            SkipLinks.moveSkipLinkNavigationOut();
+        if (fragment.length > 0 && isSelectorValid(fragment) && document.querySelector(fragment)) {
             if (jQuery(fragment).is(':focusable')) {
                 jQuery(fragment)
                     .click()
@@ -88,44 +43,13 @@ const SkipLinks = {
                 //Set the focus on the first focusable element:
                 jQuery(fragment).find(':focusable').eq(0).focus();
             }
-            SkipLinks.activeElement = fragment;
             return true;
-        } else {
-            jQuery('#skip_link_navigation li a')
-                .first()
-                .focus();
         }
         return false;
     },
 
-    insertHeadLines: function() {
-        var target = null;
-        jQuery('#skip_link_navigation a').each(function() {
-            target = jQuery(this);
-            if (jQuery(target).is('li,td')) {
-                jQuery(target).prepend(
-                    '<h2 id="' +
-                        jQuery(target).attr('id') +
-                        '_landmark_label" class="skip_target">' +
-                        jQuery(this).text() +
-                        '</h2>'
-                );
-            } else {
-                jQuery(target).before(
-                    '<h2 id="' +
-                        jQuery(target).attr('id') +
-                        '_landmark_label" class="skip_target">' +
-                        jQuery(this).text() +
-                        '</h2>'
-                );
-            }
-            jQuery(target).attr('aria-labelledby', jQuery(target).attr('id') + '_landmark_label');
-        });
-    },
-
     initialize: function() {
         SkipLinks.insertSkipLinks();
-        SkipLinks.setActiveTarget();
     }
 };
 
diff --git a/resources/assets/stylesheets/scss/skiplinks.scss b/resources/assets/stylesheets/scss/skiplinks.scss
index b30a43d5337143087f0f3ef807f70459eb89f78d..da8cc52e44b817f6e1dc7a059caa42f6763040a1 100644
--- a/resources/assets/stylesheets/scss/skiplinks.scss
+++ b/resources/assets/stylesheets/scss/skiplinks.scss
@@ -2,13 +2,21 @@
 #skip_link_navigation {
     background-color: $white;
     border: 2px solid $orange;
-    left: -600px;
+    left: 50vw;
     margin: 0;
     padding: 10px;
     position: fixed;
+    transform: translateX(-50%);
+    transition: opacity 0.5s linear;
     top: 20px;
     z-index: 3000;
 
+
+    &:not(:focus-within) {
+        opacity: 0;
+        pointer-events: none;
+    }
+
     ul {
         list-style-type: none;
         margin: 0;
@@ -16,21 +24,22 @@
     }
 }
 
-.skip_target {
-    position: absolute;
-    @include hide-text();
-}
-
-#skiplink_list {
-    display: none;
-}
-
 button.skiplink {
     border: 0;
     background-color: $white;
     color: $base-color;
+    cursor: pointer;
     line-height: 1em;
     margin-bottom: 0.1em;
+
+    &:hover,
+    &:active {
+        color: $active-color;
+    }
+
+    @media not prefers-reduced-motion {
+        transition: color 0.3s;
+    }
 }
 
 body.enable-skiplinks {
diff --git a/templates/skiplinks.php b/templates/skiplinks.php
index da22210789495c5aac8d6da3778c5c3ee6272dd3..dcea66b08250b3d5543f892a1c9c9a4f4e2ce41c 100644
--- a/templates/skiplinks.php
+++ b/templates/skiplinks.php
@@ -11,15 +11,9 @@
                 <?= htmlReady($nav->getTitle()) ?>
             </button>
         <? else : ?>
-            <? if (is_internal_url($url)) : ?>
-                <a href="<?= URLHelper::getLink($url) ?>" data-in-fullscreen="<?= $fullscreen[$index] ?>">
-                    <?= htmlReady($nav->getTitle()) ?>
-                </a>
-            <? else : ?>
-                <a href="<?= htmlReady($url) ?>" data-in-fullscreen="<?= $fullscreen[$index] ?>">
-                    <?= htmlReady($nav->getTitle()) ?>
-                </a>
-            <? endif ?>
+            <a href="<?= URLHelper::getLink($url, [], !is_internal_url($url)) ?>" data-in-fullscreen="<?= $fullscreen[$index] ?>">
+                <?= htmlReady($nav->getTitle()) ?>
+            </a>
         <? endif ?>
         </li>
     <? endforeach ?>