将锚点更改为指向页面的 data-url 属性？

Question

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

的 div

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

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

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

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

锚标记示例：

<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

将锚点更改为指向页面的 data-url 属性？

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

javascript

wordpress

anchor

jquery