jquery - 带有 url 的锚点不适用于 onclick 事件

Question

我有一个链接可以滚动到顶部

<a href="index.html?test=test#slides-1" id="re" class="ancLinks"></a>
$("a.ancLinks").click(function (){
            elementClick = $("this").attr("href");
            $('html, body').animate({
            scrollTop: $(elementClick).offset().top
            }, 1000);
        });

当我取出 url (index.html?test = test) 时，它可以工作。但我需要绝对链接在网址中。怎么了

Answer 1

我想你想要：

演示

$("a.ancLinks").click(function (e){
            e.preventDefault();
            elementClick = this.hash;
            $('html, body').animate({
            scrollTop: $(elementClick).offset().top
            }, 1000);
        });

Answer 2

您正在尝试获取归结为“index.html?test=test#slide-1”的元素的偏移位置，它不是元素而是 URI。

元素偏移量应该从一个真实的 DOM 元素中获取，可能是目标。您可以通过执行以下操作来简单地实现这一点：

$('a.ancLinks').click(function(event) {
    var $this = $(this),
        href = $this.attr('href'),
        target = $this.data('target') || (href.indexOf('#') !== -1 ? '#'+href.split('#').pop() : false);

    if (!target) return true;
    var $target = $(target);

    if ($target.length == 0) return true;
    event.preventDefault();
    var offset = $target.offset();

    $('html, body').animate({
        scrollTop: offset.top || 0
    });
});

这适用于<a href="anyurl.html#your-html-ID">和<a href="anypage.html" data-target="#your-html-ID">