添加哈希到url和主动正确部分

Question

HTML：

<section id="horizontal_nav">
 <nav>
   <a class="product_name active" href="#"><p>vc-1</p></a>
   <a class="product_name" href="#"><p>vc-2</p></a>
   <a class="product_name" href="#"><p>vc-3</p></a>
 </nav>
</section>

<article class="product_info">
//content vc-1
</article>
<article class="product_info">
//content vc-2
</article>
<article class="product_info">
//content vc-3
</article>

JS跳过文章：

$('.product_name').on('touchstart click', function(e) {
        $('.product_name').removeClass('active');
        $(this).toggleClass('active');

        e.preventDefault();

        $('.product_info').animate({left: +$(this).index() * -100+'vw'}, 500);
    }); 

我看到很多关于JQuery UI插件的例子。但在我看来，这是复杂的方式。我的问题是，我需要将哪一行代码添加到网址，因此我们的客户可以直接通过网址链接到正确的文章标记，如HTML中所示？

亲切的问候，