Question

在我的网站导航中按下a代码后，我希望该页面滚动到一个div，其中data-url属性与a代码匹配＆＃ 39; s href。因此，a代码不会转到列出的href，而是转移到div属性与data-url匹配的任何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元素？

示例锚标记：

<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属性？

1 个答案: