根据页面更改 window.load scrollTop 动画速度

Question

我已经将我的网站设置为通过使用 scrollTop 滚动到某个 div 函数来跳过强制标题元素。我专门将它设置为慢速滚动，以便用户“知道标题在上面”，但在随后的页面上，我宁愿它只是从那个滚动位置开始。

我正在尝试使用简单的 if / else 语句来获取 wordpress 页面 (is_home) 并将动画设置为 1200，否则将动画设置为 0。我什至已经进入并在is_home 和 True 的页面。但它仍然无法正常工作。任何想法如何解决 if / else 或建议以更好地实现这一点？

if (is_home()) {
    $(window).load(function () {
        $('html, body').animate({
            scrollTop: $("#grey").offset().top
        }, 1200);
    });
} else {
    $(window).load(function () {
        $('html, body').animate({
            scrollTop: $("#grey").offset().top
        }, 0);
    })
}

Answer 1

好吧，if(is_home()) 是来自 WordPress API 的 php 语句，它在 JS 中不可用。您可以基于此包含不同的脚本调用，但在我看来这是相当糟糕的做法。

确保在您的插件之后执行以下内容，并且显然是 jquery。好地方可能在wp_footer()之后

<?php 
if (is_home()) { ?>
    <script>
    $(window).load(function () {
        $('html, body').animate({
            scrollTop: $("#grey").offset().top
        }, 1200);
    });
    </script>    
<?php } else { ?>
    <script>
    $(window).load(function () {
        $('html, body').animate({
            scrollTop: $("#grey").offset().top
        }, 0);
    });
    </script>
<?php } ?>

Answer 2

您正在将 php 和 JavaScript 结合在一起。 is_home() 是一个 PHP 语句 你需要重写你的代码如下：

<?php
    if (is_home()) {
 ?>
        <script type="text/javascript">
            $(window).load(function () {
                $('html, body').animate({
                    scrollTop: $("#grey").offset().top
                }, 1200);
            });
        </script>
<?php 
    } else {
?>
        <script type="text/javascript">
            $(window).load(function () {
                $('html, body').animate({
                    scrollTop: $("#grey").offset().top
                }, 0);
            });
        </script>        
<?php 
    } 
?>

同时使用jQuery 而不是$ 以避免与任何其他JavaScript 库发生冲突