jQuery加载页面滚动问题

jQuery OnLoad Page Scroll Issue

本文关键字：滚动 问题 加载 jQuery      更新时间：2023-09-26

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

我已经编写了一个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);
    }
}

根据您的评论：

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

你的剧本似乎确实奏效了，但之后会受到一些影响。我相信，当滚动动画生效时，有一些资源作为额外的css代码或图像没有被考虑在内，由于该函数通过top偏移量工作，您必须确保在加载了所有可能影响文档高度或元素偏移量的资源后才使用它。

因此，不要在.ready()中使用脚本，而是使用.load()。

.ready()与.load()

在大多数情况下，只要DOM层次结构具有已全面建成。传递给.ready（）的处理程序是有保证的在DOM准备好之后执行，所以这通常是最好的用于附加所有其他事件处理程序并运行其他jQuery代码的位置。

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

相关文章：