页面锚点的Javascript onclick window.location？答案

【问题标题】：Javascript onclick window.location for page anchors?页面锚点的Javascript onclick window.location？
【发布时间】：2013-11-16 00:57:36
【问题描述】：

所以 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？

【问题讨论】：

@Dude 你能给我举个例子吗？（RGraham 刚刚发布了一个示例）

标签： javascript jquery html

【解决方案1】：

这可以使用 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

【讨论】：

能够为此制作一个jsfiddle吗？我无法在我的 html 中运行它：/
为了满足我的需要，它们肯定是最好的，我已经掌握了动画速度，但是如果我将它设置为快速或 1，我该如何添加一些缓和？
在动画函数中将“slow”替换为“slow”、“swing”。有关更多信息，请参阅api.jquery.com/animate

【解决方案2】：

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>

【讨论】：

这仍然对我不起作用，链接不是实际链接... O_o i.imgur.com/4GgbWO3.png
插件已添加，但我看不到链接。与 Chrome 不兼容？
我在可滚动中添加了一个警报，“链接”工作但它实际上并没有滚动到我希望它滚动到的位置......
@Hyflex 你需要给它一些内容，或者用 CSS 设置它的样式来给它一个大小。目标不必是<a>。它可以是任何 DOM 元素

【解决方案3】：

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

例如：

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

【讨论】：