How to make an anchored page in a navigation menu tab

Question

In my header navigation, I would like a menu tab to direct the user to open a page and directly take them to an anchored point in that page. Does any one know how I can accomplish this in WordPress?

Thanks!

Answer 1

Add this page link in navigation menu with #target_point, example http://example.com/contact#location_map

Then add an anchor at somewhere of that page with name="location_map". Something like <a name="location_map"></a>

Now when someone clicks on this menu, he'll be directed to this specific part of contact page.

Answer 2

If you only seek to direct users instantly to the anchor point, you'd use mukto90's solution. However if you want the user to arrive at a page and then have it automatically scroll to the anchor point, you'll need to add SmoothScroll jQuery as well:

$('a[href^="#"]').on('click', function(event) {
    var target = $(this.href);
    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 1000);
    }
});