JQuery动画滚动顶部奇怪的行为答案

【问题标题】：JQuery animate scrollTop strange behaviourJQuery动画滚动顶部奇怪的行为
【发布时间】：2022-01-15 13:23:54
【问题描述】：

我正在用 PHP 以垂直表格的形式制作一个简单的日历。当页面加载时，我希望它通过动画自动滚动到当天。

我选择自己创建它，因为互联网上提供的课程不允许以我想要的方式显示内容。

这在 Windows PC 上的 Chrome 中始终可以正常工作，但在 Edge 和 Android 上的 Chrome 中，它只能在隐身模式下工作或在清除缓存后 1 次。

我尝试了互联网上建议的所有解决方案，但没有任何效果。

移除视口
仅对 $('body') 进行动画处理
移除溢出：隐藏
先将溢出设置为隐藏，然后设置动画，然后再次将溢出设置为自动
移除高度：100%
在 HTML 中添加缓存标头

我不知道该怎么办了。可能是什么问题？

请记住，我只是一个初级开发人员，只在业余时间做这件事。

当前代码：

[PS：我知道分开HTML和CSS更好，但这只是一个测试。此外，示例中的变量及其值也进行了简化。]

<!DOCTYPE html>
<HTML>
    <HEAD>
        <META charset = "UTF-8">
        <META name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">
        <META HTTP-EQUIV = "CACHE-CONTROL" CONTENT = "NO-CACHE">
        <META HTTP-EQUIV = "EXPIRES" CONTENT = "Mon, 22 Jul 2002 00:00:01 GMT">
        <META http-equiv = "pragma" content = "no-cache">
        <LINK rel = "stylesheet" href = "addins/jQueryUI/jquery-ui.min.css">
        <STYLE>
            body, html {
                background-color: #<?php echo $backgroundcolor; ?>;
                color: #<?php echo $textcolor; ?>;
                line-height: 1;
                font-family: Tahoma, Geneva, sans-serif;
                font-size: 15px;
            }
            <!-- Styles for other elements are here, but not relevant for the example -->
        </STYLE>
        <SCRIPT src = "addins/jQuery/jquery.min.js"></SCRIPT>
        <SCRIPT src = "addins/jQueryUI/jquery-ui.min.js"></SCRIPT>
    </HEAD>
    <BODY>
        <DIV id = "loading" class = "loading">
            <!-- Loading image and text comes here -->
        </DIV>
        <DIV id = "pagecontent" style = "display: none;">
<?php
    /* Setting PHP vars here. */
?>
            <!-- Here is the header of the page including buttons to go to the next or previous month. -->
<?php
    for ($thisdaynumber = 1; $thisdaynumber <= $numberofdaysinmonth; $thisdaynumber++) {
?>
            <DIV id = "<?php echo "day".$thisdaynumber;?>">
                <TABLE id = "<?php echo "titletable".$thisdaynumber; ?>">
                    <TR>
<?php
                    echo "<TD";
                    if ($thisdate == $currentdate) {
                        echo " style = \"color: #".$currentdaycolor.";\"";
                    }
                    else {
                        echo " style = \"color: #".$generalcolor.";\"";
                    }
                    echo ">";
                        echo "".$thisweekdayname."";
                        echo "<BR><b>".$thisdaynumber."</b>";
                    echo "</TD>";
?>
                    </TR>
                </TABLE>
                <TABLE id = "<?php echo "contenttable".$thisdaynumber; ?>">
                    <!-- Here is the content for this date -->
                </TABLE>
            </DIV>
<?php
    }
?>
            <SCRIPT>
                // Some javascript functions here
                $(window).on('load', function() {
                    // Make a particular day stand out on request
                    var navday = "<?php echo $_GET['navday']; ?>";
                    var flashday = "<?php echo $_GET['flashday']; ?>";
                    if (navday != "") {
                        var navelementname = "#day" + navday;
                        $('html, body').animate({
                            scrollTop: $(navelementname).offset().top - 100
                        }, 1000);
                    }
                    if (flashday != "") {
                        var flashelementname = "#day" + flashday;
                        var flashcolor = "#<?php echo $flashcolor; ?>";
                        flashit(flashelementname, flashcolor);
                    }
                    // If no navday chosen and the current month is loaded, scroll to current day
                    var currentmonthloaded = "<?php echo $currentmonthloaded; ?>";
                    var currentdaynumber = "<?php echo $currentdaynumber; ?>";
                    if (currentmonthloaded == "Y" && navday == "") {
                        var currentdayelementname = "#day" + currentdaynumber;
                        $('html, body').animate({
                            scrollTop: $(currentdayelementname).offset().top - 100
                        }, 1000);
                    }
                }
                $(document).ready(function() {
                    $('#loading').hide();
                    $('#pagecontent').show();
                });
           </SCRIPT>
        </DIV>
    </BODY>
</HTML>

提前感谢您的宝贵时间。

巴特

【问题讨论】：

如果您只发布生成的代码而不是所有这些回声，也许会更容易提供帮助
据我所知，您的代码将始终在文档中运行$(window).scrollTop(0);).ready 部分
@johnSmith 是的，谢谢，我编辑了这个问题。另外，我删除了 document.ready 中的 scrollTop(0)，但这并没有改变任何东西。
也许它与你最初隐藏#pagecontent有关，就像在执行的那一刻，当天的滚动顶部可能是0，因为它是隐藏的或类似的东西
@johnSmith 问题确实在于#pagecontent 的隐藏和显示。 jQuery .show() 将显示类型设置回初始值（默认为内联）。我将其更改为.css('display', 'block')，现在它工作正常。其实我不太明白为什么这能解决我的问题。

标签： javascript php html jquery css

【解决方案1】：

问题在于#pagecontent 的隐藏和显示。 jQuery .show() 将显示类型设置回初始值（默认为内联）。我将其更改为.css('display', 'block')，现在它工作正常。其实我不太明白为什么这能解决我的问题。

【讨论】：