javascript - 页面锚点的Javascript onclick window.location？

Question

所以SOF，

#BOT我有一个小问题，当我在使用页面锚点时单击我的链接时，我不想出现在我的 url 中。

Javascript

$("a.bottom").click(function() {
    window.location = '#BOT';
});

不同的链接...

<a class="bottom" href="javascript: void(0);">BOTTOM</a>
<a href="#BOT">BOTTOM</a>

锚

<a id="KEY"></a>

如何停止#BOT在 pageurl 栏中添加它？

Answer 1

jQuery scrollTo 插件非常擅长这一点。它会将您的窗口滚动到一个元素而不使用锚点：

$("a.bottom").click(function() {
    $.scrollTo($("a[name='#BOT']"));
});

也可以使功能更通用：

jQuery

$("a.scrollable").click(function() {
    $.scrollTo($("#"+$(this).data("scrollto")));
});

HTML

<a class="scrollable" data-scrollto="BOT">BOTTOM</a>
<a id="BOT"></a>
<a class="scrollable" data-scrollto="KEY">BOTTOM</a>
<a id="KEY"></a>

Answer 2

这可以使用 jQuery offset 和 animate 来完成，如本问题中所述

function scrollToAnchor(aid) {
    var aTag = $("a[id='" + aid + "']");
    $('html,body').animate({
        scrollTop: aTag.offset().top
    }, 'slow');
}

$("a.bottom").click(function () {
    scrollToAnchor('BOT');
});

在这里提琴

Answer 3

您可以使用window.scrollTo(x,y)方法滚动页面。不需要刷新页面。

例如：

$("a.bottom").click(function() {
    scrollTo(0,100);
});