Add anchor to related issues and related merge requests

app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue

@@ -64,10 +64,11 @@ export default {
 </script>
 
 <template>
-  <div v-if="isFetchingMergeRequests || (!isFetchingMergeRequests && totalCount)">
+  <div id="related-merge-requests" v-if="isFetchingMergeRequests || (!isFetchingMergeRequests && totalCount)">
     <div id="merge-requests" class="card card-slim mt-3">
       <div class="card-header">
         <div class="card-title mt-0 mb-0 h5 merge-requests-title">
+            <a id="user-content-related-merge-requests" class="anchor" href="#related-merge-requests" aria-hidden="true"></a>
           <span class="mr-1">
             {{ __('Related merge requests') }}
           </span>

app/assets/stylesheets/pages/issues.scss

@@ -284,3 +284,26 @@ ul.related-merge-requests > li {
     text-align: right;
   }
 }
+
+.issue-details {
+  .card-title, {
+    position: relative;
+
+    a.anchor {
+      left: -16px;
+      top: 4px;
+      position: absolute;
+      text-decoration: none;
+      outline: none;
+
+      &::after {
+        content: image-url('icon_anchor.svg');
+        visibility: hidden;
+      }
+    }
+
+    &:hover > a.anchor::after {
+      visibility: visible;
+    }
+  }
+}

ee/app/assets/javascripts/related_issues/components/related_issues_block.vue

@@ -114,10 +114,11 @@ export default {
 </script>
 
 <template>
-  <div class="related-issues-block">
+  <div id="related-issues" class="related-issues-block">
     <div class="card card-slim">
       <div :class="{ 'panel-empty-heading border-bottom-0': !hasBody }" class="card-header">
         <h3 class="card-title mt-0 mb-0 h5">
+          <a id="user-content-related-issues" class="anchor" href="#related-issues" aria-hidden="true"></a>
           {{ __('Linked issues') }}
           <a v-if="hasHelpPath" :href="helpPath">
             <i