用于页面锚点的Javascript onclick window.location？

Question

SOF，

当我在使用页面锚点击单击链接时，我不希望#BOT显示在我的网址中，我遇到了一个小问题。

的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>

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

Answer 1

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

$("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

这可以使用this question

中讨论的jQuery偏移和动画来完成

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

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

小提琴here

Answer 3

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

例如：

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