You want to use HTML Anchors http://www.w3schools.com/html/html_links.asp
It is worth mentioning that you don't actually need to query the posts twice. You could you the WP get_posts function (https://codex.wordpress.org/Template_Tags/get_posts) to get the posts as an array and then loop through this array to generate a nav and your post contents.
Hope this helps!
<ul>
<?php
$query = new WP_Query( array( 'post_type' => array( 'drilling' ) ) );
while ( $query->have_posts() ) :
$query->the_post();
?>
<li><a href="#post-<?php echo the_ID(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
<?php wp_reset_query(); ?>
<?php query_posts( 'post_type=drilling'); ?>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- article -->
<section class="service-middle">
<div class="container">
<div class="service-middle-content sixteen columns">
<!-- Anchor Tag -->
<a name="post-<?php the_ID(); ?>"></a>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><?php echo the_title(); ?> </h2>
<?php the_content(); ?>
<br class="clear">
<?php edit_post_link(); ?>
</article>
<!-- /article -->
</div> <!--end service-middle-content-->
</div> <!--end container-->
</section> <!--end service-middle-->
<?php endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2>
</article>
<!-- /article -->
<?php endif; ?>