jQuery滚动到锚点返回NaN作为位置哈希答案

【问题标题】：jQuery scroll to anchor returns NaN as location hashjQuery滚动到锚点返回NaN作为位置哈希
【发布时间】：2017-01-31 14:04:22
【问题描述】：

朋友们，

我正在使用以下 jQuery 代码实现动画滚动到锚点：

(function($){
var jump=function(e)
{
    if (e){
        e.preventDefault();
        var target = $(this).attr("href");
    }else{
        var target = location.hash;
    }
    $('html,body').animate(
        {
            scrollTop: $(target).offset().top - 150
        }, 1500, 'swing', function()
        {
            location.hash = target - 150;
        });
};
$('html, body').hide();
$(document).ready(function()
{
    $('a[href^=#]:not(#toggle)').on("click", jump);
    if (location.hash){
        setTimeout(function(){
            $('html, body').scrollTop(0).show();
            jump()
        }, 0);
    }else{
        $('html, body').show()
    }
});
})(jQuery);

从上面的代码可以看出，我使用了150px的目标偏移值：

scrollTop: $(target).offset().top - 150

为了让这段代码正常工作，我还需要将带有偏移量的目标传递给 location.hash。我就是这样做的：

location.hash = target - 150;

在这样的实现下，代码运行良好。除了当我滚动到锚点时它总是在 URL 中显示#NaN。这显然是因为上面的行。但是，如果我不使用 -150px，那么它会滚动到有偏移的目标，然后突然跳转到没有偏移的原始锚点位置。

我的问题是，我如何才能实现双赢？我的意思是，URL 中没有 #NaN 并且正确滚动以从顶部偏移锚定。我听说可以使用“e.preventdefault”，但不知何故对我不起作用。

任何建议将不胜感激。

【问题讨论】：

你有一个字符串并减去一个数字。哈希有一个#号....
那么为什么不将锚点移动到偏移位置呢？
我知道我正在尝试从字符串中减去数字，这就是我得到 NAN 的原因。不幸的是，我无法将锚点移动到其他位置，因为我的页面包含许多可以重新排序的小部件。在这种情况下，我会松散页面的结构。
你将不得不做一些不同的事情。也许您应该设置哈希值，并在页面加载时对其进行调整，而不是尝试做一些奇怪的事情。其他选项是您添加带有数字的哈希并将其拆分，然后单击项目时执行的操作。
有没有机会从网址中隐藏“#Nan”？我会对这个解决方案感到满意，反正我的网站是一页布局。

标签： javascript jquery html css scroll

【解决方案1】：

试试

$('html,body').animate(
    {
        scrollTop: $(target).offset().top - 150
    }, 1500, 'swing');
location.hash = target;
};

我遇到了同样的问题，现在可以了

【讨论】：

【解决方案2】：

location.hash 包含 #，因此如果您尝试对其进行算术运算，则无法将其转换为数字。

请改用Number(location.hash.substr(1))。每当您尝试将该数字用作 DOM ID 时，都需要重新添加 #。

（不过，您可能会考虑将代码更改为不使用相同的变量来指示 DOM 节点和滚动位置；这相当混乱。如果我要重构它，我会将这些 ID 更改为有意义的标签，并设置滚动位置基于这些元素的 offset().top 而不是散列本身的数字内容。）

【讨论】：