Question

由于页面非常长，我使用一堆锚标签进行移动浏览，但是当点击锚标签时，它会将其添加到网址中。这是一个小模拟，

<a href="#anchor">page down</a>

<span id="anchor"></span>

如何保留锚点功能并阻止#anchor添加到网址？

干杯

Answer 1

您可以使用scrollTop来达到同样的效果：

$('.js-hook--page-down').click(function (e) {
    e.preventDefault();

    $('html, body').animate({
        scrollTop: $("#anchor").offset().top - 200
    }, 1500);
});

HTML：

<a class="js-hook--page-down">page down</a>

<span id="anchor"></span>

你需要为每个页面锚定一个新的js钩子。

Answer 2

由你决定如何去做，但我会这样做：

<script type="text/javascript">

$(window).on('hashchange', function(e){ // listen if hashtag is being added to the URL

    location.href = location.href.replace(location.hash,"") //replace it with nothing
    console.log("bam!"); //enjoy it

});

</script>

Answer 3

@DGibbs我对你的代码进行了修改，以便不必为页面上的每个锚写出来，而是可以使用它代替

$('.js-anchor').click(function (evt) {
        evt.preventDefault();
        var anchor = $(this).text();

        $('html, body').animate({
            scrollTop: $('#' + anchor).offset().top
        }, 1500);
    });

也许这对其他人也有帮助。作为参考，html看起来像这样

<a class="js-anchor">Top</a>


<span id="Top"></span>

显然，使用此代码，您的锚点ID必须与链接中的文本匹配才能生效

Answer 4

将click事件监听器添加到您的链接并使用preventDefault。

$('.mylink').click(function(event){
    event.preventDefault();
});

这将阻止链接修改网址。

从URL中删除锚标记

4 个答案: