javascript - 更改 anchor 以指向页面的 data-url 属性？

Question

当在我的网站导航上按下 a 标记时，我希望页面滚动到具有与 匹配的 data-url 属性的 div 标签的 href。因此，a 标记不会转到列出的 href，而是转到任何具有 data-url 属性的 div与 href 匹配。

该网站的主页从 WordPress 后端的页面中获取内容并将其显示为单页网站。

到目前为止，我已经尝试过以下方法，但没有成功:

$('.home #menu-main-nav > li > a').click(function(e) {
    e.preventDefault();
    $anchor = $(this).attr('href');
    $(this).attr('href',$(this).attr("data-id"));
})

我想我错过了在页面上的 div 元素中循环查找匹配的 data-url 元素的过程？

anchor 标记示例:

<a href="http://www.website.com/about-us/">About us</a>

示例 div:

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

Answer 1

您可以将页面滚动到所需的部分，如下所示:

//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);
})

可以在这里观看直播: http://jsfiddle.net/L69642ta/

如果您不需要为所需的 div 设置动画，只需删除 .animate() 并使其如下所示:

...
$('html, body').scrollTop(position.top + scroll_offset);
...

可以在这里观看直播: http://jsfiddle.net/L69642ta/1