jQuery OnLoad 页面滚动问题

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);
}

我在两种不同的情况下调用该函数；当用户单击对象在当前页面上的 link 时，以及当用户单击 link 时将他们带到另一个页面，然后再滚动到该元素。见下文：

当您在页面上时：

$('.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);
    }
});

当您在该页面上并单击 link 时，它可以完美运行，但是当您不在该页面上时，它会按照您的预期将您带到后续页面，但它不会然后滚动到所需的元素。

如果您需要更多信息，请告诉我

提前致谢

编辑： 添加函数 handleScroll(target)

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

Answer 1

关注您的评论：

I've noticed when refreshing the page is that it scrolls down then jumps back to the top of the page

看来你的脚本确实有效，但后来有些东西影响了它。我相信有一些资源作为额外的 css 代码或图像在滚动动画生效时没有被考虑在内并且因为该功能通过 top 偏移工作 - 你必须确保你在加载所有可能影响文档高度或元素偏移量的资源后使用它。

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

.ready() vs. .load()

In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.

jQuery OnLoad 页面滚动问题

jQuery OnLoad Page Scroll Issue

html

javascript

jquery

scrollto