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

Question

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

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

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

移除视口
仅动画 $('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>

提前感谢您的宝贵时间。

巴特

Answer 1

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-01-19 09:04:07

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-01-19 09:04:07

解决方案1
0 已采纳 2022-01-19 09:04:07