Question

我正在开发一个网站，其中涉及用户可以使用地址栏中的#值从其他网页导航到页面的不同部分。

我编写了一个jQuery函数来处理滚动：

jQuery.fn.scrollToDiv = function(navheight)
{
    if (!navheight)
    {
        navheight = 30;
    }

    var offset = this.offset();
    var offsetTop = offset.top;
    var totalScroll = offsetTop-navheight-27;
    $('body,html').animate({
            scrollTop: totalScroll
    }, 500);
}

我在两种不同的场景中调用该功能;当用户单击对象在当前页面上的链接时，以及用户在滚动到元素之前单击将其带到另一页面的链接时。见下文：

当您在页面上时：

$('.gotoPage').on('click', function(e)
{
    e.preventDefault();
    var sPath = window.location.pathname;
    var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
    if (sPath != '' && sPath != 'home')
    {
        var href = $(this).attr('href');

        handleScroll(href);
    }
});

当你不在页面上时：

$(document).ready(function(e) 
{    
    var target = window.location.hash;

    if (target != '')
    {
        $(target).scrollToDiv(30);
    }
});

当您在页面上并单击链接时它非常有效，但是当您不在页面上时，它会按照您的预期将您带到后续页面，但它不会滚动到所需的元素

如果您需要更多信息，请与我们联系

提前致谢

编辑：添加了功能handleScroll(target)

function handleScroll(target)
{
    if (target != '')
    {
        $(target).scrollToDiv(30);
    }
}

Answer 1

发表评论：

我在刷新页面时注意到它向下滚动跳回页面顶部

您的脚本似乎确实有效，但之后会影响它。我相信有一些资源作为额外的css代码或图像，当滚动动画生效时不会被考虑在内，并且由于该功能按top偏移工作 - 你必须确保你＆＃39 ;在加载可能影响文档高度或元素偏移量的所有资源后重新使用它。

因此，请使用.ready()。

，而不是在.load()中使用您的脚本

.ready() vs. .load()

在大多数情况下，只要DOM层次结构可以运行脚本   完全建成。传递给.ready（）的处理程序是有保证的   在DOM准备好之后执行，所以这通常是最好的   放置所有其他事件处理程序并运行其他jQuery代码的地方。

在代码依赖于加载的资产的情况下（例如，如果   图像的尺寸是必需的），代码应放在一个   改为加载事件的处理程序。

jQuery OnLoad页面滚动问题

1 个答案: