Javascript onclick window.location for page anchors?

Javascript onclick window.location for page anchors?

本文关键字：page anchors for location onclick window Javascript      更新时间：2023-09-26

So SOF，

我

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

爪哇语

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

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>

这可以使用jQuery偏移量和动画来完成，如本问题中所述

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

在这里摆弄

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

例如：

$("a.bottom").click(function() {
    scrollTo(0,100);
});
相关文章：