Q:

Changing anchor to point at data-url attribute of page?

When an a tag is pressed on my site's navigation I would like the page to scroll to a div which has a data-url attribute which matches the a tag's href. So the a tag would not go to the listed href, but to any div with a data-url attribute which matches the href.
The site's home page grabs content from pages in a WordPress back end and displays them as a one-page site.
So far I've tried the below, and had no luck:
$('.home #menu-main-nav > li > a').click(function(e) {
    e.preventDefault();
    $anchor = $(this).attr('href');
    $(this).attr('href',$(this).attr("data-id"));
})

I presume I'm missing out looping through the div elements on the page for a matching data-url element?
Example anchor tag:
<a href="http://www.website.com/about-us/">About us</a>

Example div:
<div class="subpage" data-url="http://www.website.com/about-us/">
</div>

A:

You can scroll the page to the needed section like so:
//find all subpages beforehand
var subPages = $('.subpage'),
    scroll_offset = -10; //if the position of the scroll needs tweaking

$('#menu-main-nav').on('click' ,'a', function(e) {
    e.preventDefault();

    $anchor = $(this).attr('href');

    //find the needed div
    var target = subPages.filter(function(){
        return $(this).data('url') == $anchor; //this will return the needed div
    });

    //find the target coordinates
    var position = target.offset();

    $('html, body').animate({
        scrollTop: position.top + scroll_offset
    }, 500);
})

Can be seen live here:
http://jsfiddle.net/L69642ta/
If you don't need to animate to the needed div, simply remove the .animate() and make it like this:
...
$('html, body').scrollTop(position.top + scroll_offset);
...

Can be seen live here:
http://jsfiddle.net/L69642ta/1

