Change markdown header tab anchor links to buttons

What does this MR do?

Changes markdown header tab anchor links to buttons. (see https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/21988#note_105636972)

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• Tests added for this feature/bug
• Conforms to the code review guidelines
• Conforms to the merge request performance guidelines
• Conforms to the style guides
• Conforms to the database guides

app/assets/javascripts/vue_shared/components/markdown/header.vue

 <script>
   import $ from 'jquery';
-  import tooltip from '../../directives/tooltip';
-  import toolbarButton from './toolbar_button.vue';
-  import icon from '../icon.vue';
+  import Tooltip from '../../directives/tooltip';
+  import ToolbarButton from './toolbar_button.vue';
+  import Icon from '../icon.vue';
 
   export default {
     directives: {
-      tooltip,
+      Tooltip,
     },
     components: {
-      toolbarButton,
-      icon,
+      ToolbarButton,
+      Icon,
     },
     props: {
       previewMarkdown: {
@@ -57,27 +57,24 @@
         :class="{ active: !previewMarkdown }"
         class="md-header-tab"
       >
-        <a
+        <button
           class="js-write-link"
-          href="#md-write-holder"
           tabindex="-1"
           @click.prevent="writeMarkdownTab($event)"
         >
           Write
-        </a>
+        </button>
       </li>
       <li
         :class="{ active: previewMarkdown }"
         class="md-header-tab"
       >
-        <a
+        <button
           class="js-preview-link js-md-preview-button"
-          href="#md-preview-holder"
           tabindex="-1"
-          @click.prevent="previewMarkdownTab($event)"
         >
           Preview
-        </a>
+        </button>
       </li>
       <li
         :class="{ active: !previewMarkdown }"